有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。
由于这句存在误解的可能性(我就误解了他的意思),振之在第一时间就删除这句话。他的意思准确地说,是:first-letter这个伪类无法向下“继承”。例如:
叼着烟斗的名侦探说过:“除掉所有不可能的,留下来的,无论多么不合理,但它就是真相......!”是的,真相就是IE8 beta1不支持:first-letter(还有:first-line)。我希望这是beta1版本中的一处来不及修复的bug,因为在微软官方的IE5~IE8 CSS兼容表中,明确的标明了出去IE5不支持:first-letter外,其他版本一律支持。这一点,在许多博客中都被提及,例如怿飞的IE8 beta1 中的 CSS 属性。
如果你的兼容性检查列表中还没有IE8的名字,如果你觉得诸如首字下沉这样的额外视觉效果可有可无,那么你可以在这一行结束浏览了。但,如果你执着于此,希望IE8的用户也可以在你的网页上看到类似于报刊文章上的效果,你可以往下看。
在多次努力之后,我放弃折腾那可怜的css,IE8b1对于:first-letter的不支持,不是在css hack层面能解决的。我们只能求助于js。我们需要找到一个页面中第一个段落开始的地方,找到这个段落第一个字,让js将其处理为特殊样式:
接下来,我们只需要在css中这样定义:
因此,我们需要改动一下css:
说实话,我并不推荐使用如此繁复的代码(效果页面2和3)实现一个首字下沉。就好像在html中不推荐使用<q></q>那样。直接使用效果页面1的代码,让js去做这个在IE中找不到平衡点的事情——js开启,大家都有同样的效果;js关闭,效果也一起消失。因为它不仅使得IE8可以应用首字下沉的效果,也避免了其他版本IE在对:first-child:first-letter这样的一个css应用上的处理差异(直接使用:first-letter会让每个段落开头都有一个首字下沉效果,这也是为什么振之在他的博客正文中不使用这个效果的原因)。
上帝保佑,IE8正式推出的时候可以支持:first-child(还有:first-line)。