font和line-height之CSS代碼書寫順序不同,導致顯示效果不一樣
更新時間:2007年05月16日 00:00:00 作者:
無意中發(fā)現(xiàn),針對同一HTML標記,在CSS中同時應用了font和line-height屬性時,就得小心了,這二者的書寫順序不一樣,會導致顯示效果不同。
即:
>>> 如果先寫font,再寫line-height,顯示效果正常
>>> 如果先寫line-height,再寫font,則line-height定義的效果會丟失,在IE、Firefox、Opera下都出現(xiàn)這種BUG
具體效果請看以下代碼:
<p>h1:</p>
<h1 style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專注Web技術,體驗開發(fā)樂趣!</h1>
<h1 style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術,體驗開發(fā)樂趣!</h1>
<p>div:</p>
<div style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專注Web技術,體驗開發(fā)樂趣!</div>
<div style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術,體驗開發(fā)樂趣!</div>
原文:http://www.cnlei.org/blog/article.asp?id=343
注:看了楓巖的留言,去查了下CSS幫助文檔
引用
對font的定義參數(shù)必須按照如下的排列順序。每個參數(shù)僅允許有一個值。忽略的將使用其參數(shù)對應的獨立屬性的默認值:
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
即:
>>> 如果先寫font,再寫line-height,顯示效果正常
>>> 如果先寫line-height,再寫font,則line-height定義的效果會丟失,在IE、Firefox、Opera下都出現(xiàn)這種BUG
具體效果請看以下代碼:
<p>h1:</p>
<h1 style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專注Web技術,體驗開發(fā)樂趣!</h1>
<h1 style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術,體驗開發(fā)樂趣!</h1>
<p>div:</p>
<div style="background:#f00;margin:5px 0;font:bold 20px 宋體,Geneva,Arial,sans-serif;line-height:40px;">IECN.Net - 專注Web技術,體驗開發(fā)樂趣!</div>
<div style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術,體驗開發(fā)樂趣!</div>
原文:http://www.cnlei.org/blog/article.asp?id=343
注:看了楓巖的留言,去查了下CSS幫助文檔
引用
對font的定義參數(shù)必須按照如下的排列順序。每個參數(shù)僅允許有一個值。忽略的將使用其參數(shù)對應的獨立屬性的默認值:
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
相關文章
編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu
編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu...2007-03-03
網(wǎng)頁打開新窗口target=_blank不符合標準
我們要在新窗口中打開鏈接通常的做法是在鏈接后面加target="_blank",我們采用過渡型的DOCTYPE(xh tml1-transitional. dtd)時沒有問題,但是當我們使用嚴格的DOCTYPE(xhtml1-strict.dtd)時,這個方法將通不過W3C的校驗,會出現(xiàn)如下錯誤提示:2008-05-05

