5.23日音訊,使表單行高適應多瀏覽器。表單的不兼容,在我們網(wǎng)頁制作中是比較常見的,為什么會出現(xiàn)這種情況呢,是因為瀏覽器對所默認值的認同不一樣導致的,當然了,我們不應該去追究誰對誰錯,只能我們能把它們的內(nèi)涵掌握了,讓它們互相兼容,就是我們所必須要學會的。
<inputtype="submit"id="button"value="engage"/>
CSSCode
#button{
border:2pxsolid#06f;
color:#06f;
background-color:#6cf;
font:bold12pxArial,Helvetica,sans-serif;
line-height:50px;
}
多效果圖中,明顯的告訴我們,在Firefox和Opera瀏覽器中都存在問題,而且致命的一點是:“無論你通過什么手段去修改button的line-height,在Firefox和Opera瀏覽器下都無任何效果。”是什么導致的呢?(我以前從沒注意到他們有這樣的一個bug存在)??戳松厦娴奈恼挛也胖?,原來是瀏覽器對定義button的line-height是不同的,我們來看看瀏覽器在Firefox下的解析line-height值的截圖:
從圖中告訴我們一個道理:button的行高在Chrome/Safari/IE8等瀏覽器解析正確的line-height(用戶自定的值“50px”);而在Firefox和Opera解析的line-height卻是默認的值,只有“15px”。那為什么會這樣呢?
要回答這個問題,我回答不出來,可能您知道是為什么?我只能把他當作是Firefox和Opera瀏覽器下的一個特點,換句話就是:這兩個瀏覽器的line-height默認值為normal并且還加了一個“!important”,類似于:
button,input[type="reset"],input[type="button"],input[type="submit"]{
line-height:normal!important;
}
那我們是不是可以在設置值的時候也加個“!important”解決呢?我嘗試了,可是失敗了,那我們需要怎么來解決呢?
如何解決?
RobGlazebrook在他的《TheFirefoxInputButtonLine-HeightBug》教程中使用了一種方法——在button中不重置line-height的值,而是使用padding來制作相同的效果。這樣上面的實例可以這樣修改:
#button{
border:2pxsolid#06f;
color:#06f;
background-color:#6cf;
font:bold12pxArial,Helvetica,sans-serif;
padding:18px6px;
}