首頁 >web前端 >css教學 >font和line-height之CSS程式碼書寫順序不同,導致顯示效果不一樣_經驗交流

font和line-height之CSS程式碼書寫順序不同,導致顯示效果不一樣_經驗交流

WBOY
WBOY原創
2016-05-16 12:07:481939瀏覽

無意間發現,針對同一HTML標記,在CSS中同時應用了font和line-height屬性時,就得小心了,這二者的書寫順序不一樣,會導致顯示效果不同。
即:
>>> 如果先寫font,再寫line-height,顯示效果正常
>>>> 如果先寫line-height,再寫font,則line-height定義的效果會遺失,在IE、Firefox、Opera下都出現這種BUG

具體效果請看以下程式碼:

h1:


IECN.Net - 專注Web技術,體驗開發樂趣!


IECN.Net - 專注WebWeb技術,體驗開發樂趣!



div:


IECN.Net - 專注Web技術,體驗開發樂趣!

IECN.Net - 專注WebWeb技術,體驗開發樂趣!



原文: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
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn