從網上看了這篇關於表單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下拉框。
safari瀏覽器下 input 表單的陰影
之前寫了乙個登入表單頁面，再iphone上測試遇到了一些奇怪的問題 表單中的input type submit 按鈕在iphone的safari瀏覽器下會出現圓角的情況 input type text 文字輸入框會有內陰影，這些問題該怎麼處理呢？陰影 正常 在ios下，input 表單缺省會有個內陰...
各瀏覽器CSS hack
區別 ie6與 ff background orange background blue 區別 ie6與 ie7 background green important background blue 區別 ie7與 ff background orange background green 區別 f...
解決input的file型別各瀏覽器的樣式相容
我們都希望做出的上傳可以是以下這種美觀的，但是原生的input file型別，不僅不美觀 而且各瀏覽器都顯示不同，如何解決呢？美觀的 chrome下 firefox下 ie下 一般來說，我們會用 模擬 的方式，先把原生的file型別設定為透明 不是dispaly none 然後用其它元素模擬出它的樣...