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

2022-08-05 15:57:26 字數 1700 閱讀 8585

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

input按鈕在各個瀏覽器之間的相容性問題,看下邊這段**:

input.item {

background: #4d90fe;

border: 1px solid #4d90bb;

color: white;

這是很簡單的一個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方面,

ie7、ie8、ie9、chrome表現的效果都是一致(38×25)的,這次最讓我失望就是firefox了,

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

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

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

也不是說完全沒有辦法的,其中很多用js可以模擬實現一致的效果,最經典的就是 select下拉框。