在多次努力之后,我放弃折腾那可怜的css,IE8b1对于:first-letter的不支持,不是在css hack层面能解决的。我们只能求助于js。我们需要找到一个页面中第一个段落开始的地方,找到这个段落第一个字,让js将其处理为特殊样式:
复制代码
window.onload = initial;
function initial() {
var letter = document.getElementsByTagName(‘p’)[0];
var word = letter.firstChild.nodeValue;
var num = word.substring(0,1);
var other = word.substring(1,word.length);
document.getElementsByTagName(‘p’)[0].innerHTML= “<span id=’first-letter-plus’>” + num + “</span>” + other;
}
原谅我的js水平,我始终无法直接定义num的方法,我只能给其添加一些标记,以至于代码如此臃肿,我相信一定有更简单、更强大的js方法。
接下来,我们只需要在css中这样定义:
复制代码
#demo #first-letter-plus { font-size:40px; font-family:”楷体_GB2312″;
font-weight:bold; font-style: normal; line-height:1.2em; float:left;
padding:5px 2px 0 0; color:#c00; }
查看效果页面1,所有的浏览器都搞定了,这一切都建立在不关闭js的前提下。但是对于一些完美者来说,考虑到有人会关闭js运行浏览器时,我们需要再额外添加一些代码:
复制代码
#demo p:first-child:first-letter { font-size: 40px; font-family:”楷体_GB2312″;
font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0;
这样在关闭js的情况下,FF、Opera以及Safari都可以正常显示应有的首字下沉效果,不过IE们就有些混乱,IE8b1天生不支持,无效果;IE7正常;IE6不识别:first-child:first-letter这样的用法;IE5.5神奇的识别了:first-letter,但是它忽略了:first-child,这导致了所有段落p都会有一个首字下沉的效果,这可不是我们排版上希望看到的。并且当你回复使用js的时候,在Opera中会产生一个有趣的现象,段落的前两个字都有了效果,查看效果页面2。这是因为在Opera中,第一个字包含在<span></span>中,效果由js实现,Opera认为p的:first-letter应该在<span></span>之后开始。
因此,我们需要改动一下css:
复制代码
#demo p > *:first-child:first-letter { font-size: 40px; font-family:”楷体_GB2312″;
font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00; }
这样以来,Opera中的奇怪现象也消失了。查看这个效果页面3。
说实话,我并不推荐使用如此繁复的代码(效果页面2和3)实现一个首字下沉。就好像在html中不推荐使用<q></q>那样。直接使用效果页面1的代码,让js去做这个在IE中找不到平衡点的事情——js开启,大家都有同样的效果;js关闭,效果也一起消失。因为它不仅使得IE8可以应用首字下沉的效果,也避免了其他版本IE在对:first-child:first-letter这样的一个css应用上的处理差异(直接使用:first-letter会让每个段落开头都有一个首字下沉效果,这也是为什么振之在他的博客正文中不使用这个效果的原因)。










