表單input按鈕在各瀏覽器之間的兼容性

從網上看了這篇關於表單input按鈕的瀏覽器兼容性問題，總結的還不錯，因此copy下來學習下。

input按鈕在各個瀏覽器之間的兼容性問題,看下邊這段代碼：

input.item {

background: #4D90FE;

border: 1px solid #4D90BB;

color: white;

}

<input type="submit" value="提交" />

這是很簡單的一個input提交按鈕，它在各大瀏覽器中的狀況以下：

很明顯，咱們會看到它在每一個瀏覽器中的效果都是長短不一，良莠不齊的，哪一個是標準的也很差說。

如今咱們來對他進行一個修正，我用的修正樣式以下：

.item input {

background:#4D90FE;

border:1px solid #4D90BB;

color:white;

font-family:Arial,sans-serif,Tahoma; 規定同一字體

font-size:12px; 規定同一字體大小

height:25px; 解決Safari和Chrome下的高度問題

line-height:15px; 協調height，讓文字居中

overflow:visible; 只有設置這個屬性IE下padding才能生效

padding:0 0.5em; chrome、ff默認值；調整其值，讓IE和其餘瀏覽器的同樣

}

後面有註釋的六行就是後來添加的。咱們從上圖能夠看到，chrome下高度」有問題」，不符合咱們的預期。

經測試，firefox下給input設置line-height值是無效的。

這應該是firefox中已經給input標籤的line- height值定死了，那就只有從height和padding入手了。

經測試，firefox和chrome下，input中padding都有一個默認值padding:0 0.5em;

當咱們將padding調至此默認值時發現IE下的input按鈕的高度有了變化。

再通過height與line-height協調，最終修復的input按鈕效果以下：

這時候能夠看到，input按鈕的高度在各大瀏覽器下都同樣了。咱們來個對比：

咱們將input按鈕放大並標註他的像素來看看：

通過修正，咱們可讓input按鈕的高度都達到一致（25px），寬度width方面，

IE七、IE八、IE九、chrome表現的效果都是一致（38×25）的，此次最讓我失望就是firefox了，

width竟然達到44px。有童鞋可能會說了，寬度不一致，還不是等於沒修復嗎？

好吧，我認爲企圖經過純粹的CSS樣式去讓input標籤樣式中各個瀏覽器達到一致的效果幾乎是不可 能的，

這不該該是表單設計須要過於糾結的問題，別在這方面浪費太多時間了。

也不是說徹底沒有辦法的，其中不少用js能夠模擬實現一致的效果，最經典的就是 select下拉框。