無(wú)意中發(fā)現(xiàn)，針對(duì)同一HTML標(biāo)記，在CSS中同時(shí)應(yīng)用了font和line-height屬性時(shí)，就得小心了，這二者的書(shū)寫(xiě)順序不一樣，會(huì)導(dǎo)致顯示效果不同。
即：
>>> 如果先寫(xiě)font，再寫(xiě)line-height，顯示效果正常
>>> 如果先寫(xiě)line-height，再寫(xiě)font，則line-height定義的效果會(huì)丟失，在IE、Firefox、Opera下都出現(xiàn)這種BUG

具體效果請(qǐng)看以下代碼：

<p>h1：</p>
<h1 style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專注Web技術(shù)，體驗(yàn)開(kāi)發(fā)樂(lè)趣！</h1>
<h1 style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術(shù)，體驗(yàn)開(kāi)發(fā)樂(lè)趣！</h1>

<p>div：</p>
<div style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專注Web技術(shù)，體驗(yàn)開(kāi)發(fā)樂(lè)趣！</div>
<div style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術(shù)，體驗(yàn)開(kāi)發(fā)樂(lè)趣！</div>


原文：http://www.cnlei.org/blog/article.asp?id=343

注：看了楓巖的留言，去查了下CSS幫助文檔

引用
對(duì)font的定義參數(shù)必須按照如下的排列順序。每個(gè)參數(shù)僅允許有一個(gè)值。忽略的將使用其參數(shù)對(duì)應(yīng)的獨(dú)立屬性的默認(rèn)值：
font : font-style || font-variant || font-weight || font-size || line-height || font-family 
例子：p { font: italic small-caps 600 12pts/18pts 宋體; } 

作者:ztu http://www.dnew.cn/post/217.htm#topreply

最新評(píng)論