first-letter在各浏览器中的表现

名词解释

语法:

Selector : first-letter { sRules }

说明:

设置对象内的第一个字符的样式表属性。
此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。

测试环境, IETester 0.4.4(包含5.5, 6.0, 7.0, 8.0, trident), opera 10.60(presto), firefox 3.6.4和seamonkey 2.1a1(gecko), chrome 6.0.408.1和safari 4.0.5(webkit)

测试代码

测试结果来看,  浏览器的表现分为三种种, 一种是: 查找selector的子元素, 第一个元素为text node时应用样式, 否则返回. 如gecko引擎的浏览器和trident引擎的ie7.0及以下版本的浏览器(包含ie7).

第二种如下:  如果selector的第一个子元素为element node, 则递归查找此元素的子元素, 如果找到text node则应用样式, 没找到则返回. 如webkit引擎的浏览器.

第三种和第二种比较类似, 只是最后的处理方式不同, 它会一直找到text node的子元素为止(除非整个selector不包含text node. 如presto引擎的浏览器和ie8.0

XeonWell Studio