first-letter在各浏览器下的区别
2009年01月28日 | 分类：CSS | 1 Comment » | 1,763 views
first-letter 是设置对象内的第一个字符的样式，基本语法是：Selector : first-letter { sRules } 。但是今天在使用的时候发现了一个有趣的问题。先看看下边的例子吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p:first-letter { color:red; font-weight:600; }
li:first-letter { color:red; }
</style>
</head>
<body>
<p>我才12岁</p>
<p>“我才12岁”</p>
<ul>
<li>我才12岁</li>
<li>“我才12岁”</li>
<li>我才12岁</li>
<li>我才12岁</li>
</ul>
</body>
</html>
按照我的想法，应该是第一个字母的样式显示，可是测试的结果，却跟我的不太一样，先看看ie6、ie7的显示：
Opera下的显示：
再来看看ie8、Safari、Firefox、Chrome下的显示：
在ie6、ie7和Opera下，对于p来说，只认第一个字符，不管是标点还是文字，而其它浏览器缺会将标点和第一个字符认作一起的，而对于列表来说，ie6和ie7会把前边的列表的符号和第一个字符一起改变样式，而其他浏览器只会认第一个字符。那么它们到底谁对呢，其实不用想，肯定应该是ie6、ie7的错，要不然，ie8也不会向其它浏览器趋同哦，不过我们还是需要证据的。
