關於input框的兼容性問題

在H5橫行的移動互聯網時代中，兼容性的問題每每被你們所遺忘。能夠說微軟都已經放棄了IE，天然你們也都不是特別關心這些問題。可是客戶卻不會這麼想，由於使用瀏覽器，瀏覽網站的人，太多了，以致於甚至於有人使用xp系統，ie6這樣的低端版本。爲了給用戶更好的體驗，咱們只有選擇遷就。

 

廢話說了很多了，下面進入正題。

 

最近在項目中遇到input框的兼容性問題，通過多方實驗，最終解決，特意記下來，以備之後查看，同時方便你們解決問題。

 

正常input框的css樣式，例如：

input{display：block;padding:0 10px;width:200px;height:40px;}

而後這種樣式在ie瀏覽器下會出現文字上下不居中的問題，怎麼解決呢？那就是靠上下padding填充了。

input{display：block;padding:8px 10px;width:200px;height:24px;}

 

這種方式雖然能夠解決ie瀏覽器中input框的兼容性問題，可是此次我在項目中遇到的是safari瀏覽器的不兼容問題。怎麼解決呢？通過查證，實驗後，發現設置line-height:100%;能夠解決。以下：

input{display：block;padding:0 10px;width:200px;height:40px;line-height:100%;}

 

以上就是input框在各大瀏覽器中的兼容性總結。若是那裏有錯誤，還請你們指正。