CSS教程:first-letter伪类元素的特点

作者佚名技术来源 CSS技术浏览发布时间 2012-03-01

相......！”是的，真相就是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将其处理为特殊样式：

   1:  window.onload = initial;

   2:  function initial() {

   3:      var letter = document.getElementsByTagName(''p'')[0];

   4:      var word = letter.firstChild.nodeValue;

   5:      var num = word.substring(0,1);

   6:      var other = word.substring(1,word.length);

   7:      document.getElementsByTagName(''p'')[0].innerHTML=

           "<span id=''first-letter-plus''>" + num + "</span>" + other;

   8:  }