有一次我試圖讓<div id="acticle"><p>……</p></div>中的P也能實現首字下沉,可是結果卻失敗了,得出的結論是:我們并不能隔著一層標簽去控制子對象中的第一個字符。
由于這句存在誤解的可能性(我就誤解了他的意思),振之在第一時間就刪除這句話。他的意思準確地說,是:first-letter這個偽類無法向下“繼承”。例如:
復制代碼代碼如下:
<div id=”demo”>
<p>我要實現首字下沉</p>
</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中的任何屬性均不向下繼承。
復制代碼代碼如下:
#demo:first-letter { font-size:2.5em; font-family:”楷體_GB2312″; font-weight:bold;
line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00 }
#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的用戶也可以在你的網頁上看到類似于報刊文章上的效果,你可以往下看。
新聞熱點
疑難解答