主頁 > 知識(shí)庫 > font和line-height之CSS代碼書寫順序不同,導(dǎo)致顯示效果不一樣

font和line-height之CSS代碼書寫順序不同,導(dǎo)致顯示效果不一樣

熱門標(biāo)簽:蘇州通信外呼系統(tǒng)多少錢 山西旅游景地圖標(biāo)注 上古卷軸5地圖標(biāo)注mod 沈陽智能外呼系統(tǒng)排名 中國地圖標(biāo)注各省份 北川縣地圖標(biāo)注 武漢人工外呼系統(tǒng) 荒野大鏢客2地圖標(biāo)注怎么變中文 移動(dòng)400辦理電話
無意中發(fā)現(xiàn),針對同一HTML標(biāo)記,在CSS中同時(shí)應(yīng)用了font和line-height屬性時(shí),就得小心了,這二者的書寫順序不一樣,會(huì)導(dǎo)致顯示效果不同。
即:
>>> 如果先寫font,再寫line-height,顯示效果正常
>>> 如果先寫line-height,再寫font,則line-height定義的效果會(huì)丟失,在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技術(shù),體驗(yàn)開發(fā)樂趣!/h1>
h1 style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術(shù),體驗(yàn)開發(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技術(shù),體驗(yàn)開發(fā)樂趣!/div>
div style="background:#f00;margin:5px 0;line-height:40px;font:bold 20px 宋體,Geneva,Arial,sans-serif;">IECN.Net - 專注Web技術(shù),體驗(yàn)開發(fā)樂趣!/div>


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

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

引用
對font的定義參數(shù)必須按照如下的排列順序。每個(gè)參數(shù)僅允許有一個(gè)值。忽略的將使用其參數(shù)對應(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
您可能感興趣的文章:
  • 用CSS動(dòng)態(tài)控制文本屬性
  • css white-space:nowrap屬性用法(可以強(qiáng)制文字不換行輸出)
  • CSS屬性 - white-space 空白屬性使用說明
  • word-wrap在firefox中不起作用的解決方法
  • word-wrap
  • 從零學(xué)CSS系列之文本屬性

標(biāo)簽:遼源 東莞 陽泉 海東 喀什 南充 邯鄲 濱州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《font和line-height之CSS代碼書寫順序不同,導(dǎo)致顯示效果不一樣》,本文關(guān)鍵詞  font,和,line-height,之,CSS,代碼,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《font和line-height之CSS代碼書寫順序不同,導(dǎo)致顯示效果不一樣》相關(guān)的同類信息!
  • 本頁收集關(guān)于font和line-height之CSS代碼書寫順序不同,導(dǎo)致顯示效果不一樣的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章