寫這篇文章的起因來自與毅博客的《美化段落文本 2》，在這篇文章的最後振之談到了關於:first-letter這樣的偽類元素的特點：
有一次我試圖讓<div id="acticle"><p>……</p></div>中的P也能實現首字下沉，可是結果卻失敗了，得出的結論是：我們並不能隔著一層標簽去控制子對象中的第一個字符。
由於這句存在誤解的可能性（我就誤解了他的意思），振之在第一時間就刪除這句話。他的意思准確地說，是:first-letter這個偽類無法向下“繼承”。例如：
1: <div id="demo">
2: <p>我要實現首字下沉</p>
3: </demo>
如果只定義#demo:first-letter，我們將看不到任何結果，必須使用#demo p:first-letter。和a:link這樣的鏈接偽類不同，:first-letter（當然還有其他的）無法向下“繼承”。之所以加上引號，是因為:first-letter的這種無法穿透子對象的特性和通常定義的繼承有所區別。這一概念在《CSS權威指南》中是這樣定義的：基於繼承機制，樣式不僅應用到指定元素，還會應用到它的後代元素。假設在上面的Html代碼中我們給外層定義一個邊框：#demo { border： 1px solid #000; }，我們知道這裡無法向下繼承的是border屬性，而:first-letter是一個偽類元素，換個說法，:first-letter中的任何屬性均不向下繼承。
1: #demo:first-letter { font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; 2: line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00 }
3:
4: #demo p:first-letter { font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; 5: line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00 }
如果問題僅僅是這個，那麼文章也到此結束了。但是在我測試:first-letter這個偽類元素的特質是否存在於各大浏覽器的時候，我發現在IE8下，不論我如何設置我的CSS(如上)，效果都是不可見的。原諒我的孤陋寡聞，我竟然懷疑起IE Tester的性能，我第一想到的是它對IE8的渲染核心設置有誤。接著我升級了我的IE7……直到我在嶄新的IE8 beta1浏覽器中打開測試頁的時候，我還是沒有懷疑IE8，因為即使是IE5.5也是支持: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將其處理為特殊樣式：
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: }
原諒我的js水平，我始終無法直接定義num的方法，我只能給其添加一些標記，以至於代碼如此臃腫，我相信一定有更簡單、更強大的JS方法。
接下來，我們只需要在CSS中這樣定義：
1: #demo #first-letter-plus { font-size:40px; font-family:"楷體_GB2312"; 2: font-weight:bold; font-style: normal; line-height:1.2em; float:left;
3: padding:5px 2px 0 0; color:#c00; }
查看效果頁面1，所有的浏覽器都搞定了，這一切都建立在不關閉js的前提下。但是對於一些完美者來說，考慮到有人會關閉JS運行浏覽器時，我們需要再額外添加一些代碼：
1: #demo p:first-child:first-letter { font-size: 40px; font-family:"楷體_GB2312";2: font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00; }
這樣在關閉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:
1: #demo p > *:first-child:first-letter { font-size: 40px; font-family:"楷體_GB2312"; 2: 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會讓每個段落開頭都有一個首字下沉效果，這也是為什麼振之在他的博客正文中不使用這個效果的原因）。
上帝保佑，IE8正式推出的時候可以支持:first-child（還有:first-line）。