HTML Code

CSS Code

#button {

     border: 2px solid #06f;

     color: #06f;

     background-color: #6cf;

     font: bold 12px Arial, Helvetica, sans-serif;

     line-height: 50px;

    }

多效果圖中，明顯的告訴我們，在Firefox和Opera瀏覽器中都存在問(wèn)題，而且致命的一點(diǎn)是：“無(wú)論你通過(guò)什么手段去修改button的line-height，在Firefox和Opera瀏覽器下都無(wú)任何效果。”是什么導(dǎo)致的呢？（我以前從沒(méi)注意到他們有這樣的一個(gè)bug存在）。看了上面的文章我才知道，原來(lái)是瀏覽器對(duì)定義button的line-height是不同的，我們來(lái)看看瀏覽器在Firefox下的解析line-height值的截圖：

從圖中告訴我們一個(gè)道理：button的行高在Chrome/Safari/IE8等瀏覽器解析正確的line-height(用戶自定的值“50px”);而在Firefox和Opera解析的line-height卻是默認(rèn)的值，只有“15px”。那為什么會(huì)這樣呢？

要回答這個(gè)問(wèn)題，我回答不出來(lái)，可能您知道是為什么？我只能把他當(dāng)作是Firefox和Opera瀏覽器下的一個(gè)特點(diǎn)，換句話就是：這兩個(gè)瀏覽器的line-height默認(rèn)值為normal并且還加了一個(gè)“!important”,類似于：

button, input[type="reset"], input[type="button"], input[type="submit"] {

     line-height:normal !important;

    }

那我們是不是可以在設(shè)置值的時(shí)候也加個(gè)“!important”解決呢？我嘗試了，可是失敗了，那我們需要怎么來(lái)解決呢？

如何解決？

Rob Glazebrook在他的《The Firefox Input Button Line-Height Bug》教程中使用了一種方法——在button中不重置line-height的值，而是使用padding來(lái)制作相同的效果。這樣上面的實(shí)例可以這樣修改：

#button {

     border: 2px solid #06f;

     color: #06f;

     background-color: #6cf;

     font: bold 12px Arial, Helvetica, sans-serif;

     padding: 18px 6px;

    }

更多信息請(qǐng)查看IT技術(shù)專欄