first-letter在各浏览器下的区别
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也不会向其它浏览器趋同哦，不过我们还是需要证据的。
查阅下W3C，会看到：
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line. The :first-letter pseudo-element may be used for “initial caps” and “drop caps”, which are common typographical effects. This type of initial letter is similar to an inline-level element if its ‘float’ property is ‘none’, otherwise it is similar to a floated element.
The ‘:first-letter’ also applies if the first letter is in fact a digit, e.g., the “6″ in “67 million dollars is a lot of money.”
The :first-letter pseudo-element applies to block, list-item, table-cell, table-caption and inline-block elements.
参考资料：http://www.w3.org/TR/CSS21/selector.html#first-letter
注：假如首字出现的标点为英文标点的话，那么所有浏览器下的表现是一样的，也就是第三幅图里边的，浏览器会将标点和第一个字符认为是首个字符。
标签： first-letter
这篇文章发布于 2009年01月28日，星期三，12:12，归类于 CSS。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
我才12岁 » Blog Archive » first-letter在各浏览器下的区别（2） -- 反对以用户为中心的设计，提倡以设计者为中心的设计。 (2009.09.29 @ 17:35)
[...] 年初写过一次，那次主要测试的li前边的小点以及标点的问题，可以点这里看下~早上玩blog的时候想搞大第一个字又发现了一些问题： [...]