font和line-height之CSS代碼書寫順序不同，導致顯示效果不一樣
2020-10-23 18:40:57
供稿：網友
無意中發現，針對同一HTML標記，在CSS中同時應用了font和line-height屬性時，就得小心了，這二者的書寫順序不一樣，會導致顯示效果不同。
即：
>>> 如果先寫font，再寫line-height，顯示效果正常
>>> 如果先寫line-height，再寫font，則line-height定義的效果會丟失，在IE、Firefox、Opera下都出現這種BUG
具體效果請看以下代碼：
<p>h1：</p>
<h1 style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專注Web技術，體驗開發樂趣！</h1>
<h1 style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術，體驗開發樂趣！</h1>
<p>div：</p>
<div style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專注Web技術，體驗開發樂趣！</div>
<div style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術，體驗開發樂趣！</div>
原文：http://www.cnlei.org/blog/article.asp?id=343
注：看了楓巖的留言，去查了下CSS幫助文檔
引用
對font的定義參數必須按照如下的排列順序。每個參數僅允許有一個值。忽略的將使用其參數對應的獨立屬性的默認值：
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
