DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS網頁制作教程:表單button的行高
CSS網頁制作教程:表單button的行高
編輯:CSS進階教程     

HTML Code

<input type="submit" id="button" value="engage"/>

CSS Code

#button {

     border: 2px solid #06f;

     color: #06f;

     background-color: #6cf;

     font: bold 12px Arial, 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”解決呢?我嘗試了,可是失敗了,那我們需要怎麼來解決呢?

如何解決?

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

#button {

     border: 2px solid #06f;

     color: #06f;

     background-color: #6cf;

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

     padding: 18px 6px;

    }

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved