有一次我試圖讓<div id="acticle"><p>……</p></div>中的P也能實現(xiàn)首字下沉，可是結(jié)果卻失敗了，得出的結(jié)論是：我們并不能隔著一層標(biāo)簽去控制子對象中的第一個字符。

由于這句存在誤解的可能性（我就誤解了他的意思），振之在第一時間就刪除這句話。他的意思準(zhǔn)確地說，是:first-letter這個偽類無法向下“繼承”。例如：

 如果只定義#demo:first-letter，我們將看不到任何結(jié)果，必須使用#demo p:first-letter。和a:link這樣的鏈接偽類不同，:first-letter（當(dāng)然還有其他的）無法向下“繼承”。之所以加上引號，是因為:first-letter的這種無法穿透子對象的特性和通常定義的繼承有所區(qū)別。這一概念在《CSS權(quán)威指南》中是這樣定義的：基于繼承機制，樣式不僅應(yīng)用到指定元素，還會應(yīng)用到它的后代元素。假設(shè)在上面的html代碼中我們給外層定義一個邊框：#demo { border： 1px solid #000; }，我們知道這里無法向下繼承的是border屬性，而:first-letter是一個偽類元素，換個說法，:first-letter中的任何屬性均不向下繼承。


如果問題僅僅是這個，那么文章也到此結(jié)束了。但是在我測試:first-letter這個偽類元素的特質(zhì)是否存在于各大瀏覽器的時候，我發(fā)現(xiàn)在IE8下，不論我如何設(shè)置我的css(如上)，效果都是不可見的。原諒我的孤陋寡聞，我竟然懷疑起IE Tester的性能，我第一想到的是它對IE8的渲染核心設(shè)置有誤。接著我升級了我的IE7……直到我在嶄新的IE8 beta1瀏覽器中打開測試頁的時候，我還是沒有懷疑IE8，因為即使是IE5.5也是支持:first-letter偽類的。

叼著煙斗的名偵探說過：“除掉所有不可能的，留下來的，無論多么不合理，但它就是真相......！”是的，真相就是IE8 beta1不支持:first-letter（還有:first-line）。我希望這是beta1版本中的一處來不及修復(fù)的bug，因為在微軟官方的IE5~IE8 CSS兼容表中，明確的標(biāo)明了出去IE5不支持:first-letter外，其他版本一律支持。這一點，在許多博客中都被提及，例如懌飛的IE8 beta1 中的 CSS 屬性。

如果你的兼容性檢查列表中還沒有IE8的名字，如果你覺得諸如首字下沉這樣的額外視覺效果可有可無，那么你可以在這一行結(jié)束瀏覽了。但，如果你執(zhí)著于此，希望IE8的用戶也可以在你的網(wǎng)頁上看到類似于報刊文章上的效果，你可以往下看。

在多次努力之后，我放棄折騰那可憐的css，IE8b1對于:first-letter的不支持，不是在css hack層面能解決的。我們只能求助于js。我們需要找到一個頁面中第一個段落開始的地方，找到這個段落第一個字，讓js將其處理為特殊樣式：

原諒我的js水平，我始終無法直接定義num的方法，我只能給其添加一些標(biāo)記，以至于代碼如此臃腫，我相信一定有更簡單、更強大的js方法。

接下來，我們只需要在css中這樣定義：

查看效果頁面1，所有的瀏覽器都搞定了，這一切都建立在不關(guān)閉js的前提下。但是對于一些完美者來說，考慮到有人會關(guān)閉js運行瀏覽器時，我們需要再額外添加一些代碼：


這樣在關(guān)閉js的情況下，F(xiàn)F、Opera以及Safari都可以正常顯示應(yīng)有的首字下沉效果，不過IE們就有些混亂，IE8b1天生不支持，無效果；IE7正常；IE6不識別:first-child:first-letter這樣的用法；IE5.5神奇的識別了:first-letter，但是它忽略了:first-child，這導(dǎo)致了所有段落p都會有一個首字下沉的效果，這可不是我們排版上希望看到的。并且當(dāng)你回復(fù)使用js的時候，在Opera中會產(chǎn)生一個有趣的現(xiàn)象，段落的前兩個字都有了效果，查看效果頁面2。這是因為在Opera中，第一個字包含在<span></span>中，效果由js實現(xiàn)，Opera認為p的:first-letter應(yīng)該在<span></span>之后開始。

因此，我們需要改動一下css:

這樣以來，Opera中的奇怪現(xiàn)象也消失了。查看這個效果頁面3。

說實話，我并不推薦使用如此繁復(fù)的代碼（效果頁面2和3）實現(xiàn)一個首字下沉。就好像在html中不推薦使用<q></q>那樣。直接使用效果頁面1的代碼，讓js去做這個在IE中找不到平衡點的事情——js開啟，大家都有同樣的效果；js關(guān)閉，效果也一起消失。因為它不僅使得IE8可以應(yīng)用首字下沉的效果，也避免了其他版本IE在對:first-child:first-letter這樣的一個css應(yīng)用上的處理差異（直接使用:first-letter會讓每個段落開頭都有一個首字下沉效果，這也是為什么振之在他的博客正文中不使用這個效果的原因）。

上帝保佑，IE8正式推出的時候可以支持:first-child（還有:first-line）。

最新評論