修復iPhone的safari瀏覽器上submit按鈕圓角bug

今天在公司寫了一個登陸頁面效果，讓我碰到一個怪異的問題——"表單中的input type=submit和input type=reset按鈕在iPhone的safari瀏覽器下圓角有一個bug」非常疑惑，因而蒐集整理一番,下面我來簡單的描述一下這個bug的樣子

自從完成上次iPhone的幾個頁面效果後，一直在沒有製做iPhone的頁面效果了，今天在公司寫了一個登陸頁面效果，讓我碰到一個怪異的問題——「表單中的input[type="submit"]和input[type="reset"]按鈕在iPhone的safari瀏覽器下圓角有一個bug」。

    安卓 

 

  IOS 

但是上面的代碼就在iPhone的Safari瀏覽器下出開頭所陳述的問題。一下真很差如何動手解決，由於歷來沒有接觸過，因此就一直沒有碰到過。但問題出了，就要想辦法解決，因而在GG上搜索「input submit for iPhone」，還真找到了問題所在。 Keir Whitaker 在Styling Submit Buttons for Mobile Safari 中介紹的內容和我碰到的問題可真是如出一轍，按其方法在樣式中加入：

代碼以下:

.form-actions input{
... 
-webkit-appearance: none; 
}

 

更新到iPhone一看，真爽，問題解決了。

 

原來問題出在這裏，iPhone上的safari解析input[type="submit"]和input[type="reset"]按鈕會以蘋果瀏覽器的默認UI渲染，這樣就出現我剛纔那種現像，咱們在樣式中明確的設置了button的圓角值，但到iPhone的safari上就不生效了。要想讓他生效，就須要在樣式中明確的指名：

那麼"-webkit-appearance"對button還有什麼影響呢？你們能夠參考下面的截圖：

上圖所顯示的效果，都將button設置了：

效果圖明顯的告訴咱們，在不一樣的「-webkit-appearance」選值狀況下，button所渲染的效果是不同的，詳細的測試代碼你們可以使用safari瀏覽器點擊這裏。有關於「-webkit-appearance」的詳細介紹，這回算是知道了，最後我建議你們，咱們能夠直接在「reset.css」樣式文件中加處這麼一句：

代碼以下:

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
-webkit-appearance: none;
}

 

這樣一來就不會爲這樣的問題頭痛了。

 

若是你尚未碰到，或者你也在開發移動端web，都但願你記住這個小技巧，由於當你在製做中碰到這樣的問題時，不會爲此抓破頭皮，能解決你問題。最後但願你們喜歡這篇文章，若是你以爲對你有所幫助，能夠推薦給你的朋友，或者有更好的分享能夠在下面的評論中直接給咱們留言。