寫這篇文章的起因來自與毅博客的《美化段落文本 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的這種無法穿透子對象的特性和通常定義的繼承有所區(qū)別。這一概念在《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這個偽類元素的特質是否存在于各大瀏覽器的時候，我發(fā)現在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的名字，如果你覺得諸如首字下沉這樣的額外視覺效果可有可無，那么你可以在這一行結束瀏覽了。但，如果你執(zhí)著于此，希望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）。