修復(fù)iPhone的safari瀏覽器上submit按鈕圓角bug
我要評(píng)論自從完成上次iPhone的幾個(gè)頁面效果后，一直在沒有制作iPhone的頁面效果了，今天在公司寫了一個(gè)登錄頁面效果，讓我碰到一個(gè)怪異的問題——“表單中的input[type="submit"]和input[type="reset"]按鈕在iPhone的safari瀏覽器下圓角有一個(gè)bug”。下面我來簡單的描述一下這個(gè)bug的樣子：
初載入頁面后，表單中的input[type="submit"]和input[type="reset"]按鈕渲染成下圖的樣子：
奇怪的是你點(diǎn)擊以后就會(huì)正常：
對(duì)比一下，你也會(huì)覺得怪，怪都算了，還不知道如何下手:
或許很多同學(xué)會(huì)認(rèn)為我的樣式代碼沒寫好，那么想讓大家知道是怎么一回事，先來看看我寫的代碼：
input[type="submit"]和input[type="reset"]樣式代碼：
.form-actions input{
width: 30%;
cursor: pointer;
background: rgb(61, 157, 179);
padding: 8px 5px;
font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
color: #fff;
font-size: 24px;
margin: 5px;
border: 1px solid rgb(28, 108, 122);
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.form-actions input:hover{
background: rgb(74, 179, 198);
}
.form-actions input:active,
.form-actions input:focus{
background: rgb(40, 137, 154);
position: relative;
top: 1px;
border: 1px solid rgb(12, 76, 87);
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
這樣的代碼在瀏覽器中瀏覽是完全沒有問題的：
注：請(qǐng)使用safari測試上面代碼。
可是上面的代碼就在iPhone的Safari瀏覽器下出開頭所陳述的問題。一下真不好如何動(dòng)手解決，因?yàn)閺膩頉]有接觸過，所以就一直沒有碰到過。但問題出了，就要想辦法解決，于是在GG上搜索“input submit for iPhone”，還真找到了問題所在。 Keir Whitaker 在Styling Submit Buttons for Mobile Safari 中介紹的內(nèi)容和我碰到的問題可真是一模一樣，按其方法在樣式中加入：
.form-actions input{
...
-webkit-appearance: none;
}
更新到iPhone一看，真爽，問題解決了。
原來問題出在這里，iPhone上的safari解析input[type="submit"]和input[type="reset"]按鈕會(huì)以蘋果瀏覽器的默認(rèn)UI渲染，這樣就出現(xiàn)我剛才那種現(xiàn)像，我們?cè)跇邮街忻鞔_的設(shè)置了button的圓角值，但到iPhone的safari上就不生效了。要想讓他生效，就需要在樣式中明確的指名：
.form-actions input{
...
-webkit-appearance: none;
}
告訴瀏覽器我們不希望按鈕按蘋果的默認(rèn)UI來渲染。
那么"-webkit-appearance"對(duì)button還有什么影響呢？大家可以參考下面的截圖：
上圖所顯示的效果，都將button設(shè)置了：
.button {
border-radius: 0;
}
效果圖明顯的告訴我們，在不同的“-webkit-appearance”選值情況下，button所渲染的效果是不一樣的，詳細(xì)的測試代碼大家可使用safari瀏覽器點(diǎn)擊這里。有關(guān)于“-webkit-appearance”的詳細(xì)介紹，這回算是知道了，最后我建議大家，我們可以直接在“reset.css”樣式文件中加處這么一句：
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
-webkit-appearance: none;
}
這樣一來就不會(huì)為這樣的問題頭痛了。
如果你還沒有碰到，或者你也在開發(fā)移動(dòng)端web，都希望你記住這個(gè)小技巧，因?yàn)楫?dāng)你在制作中碰到這樣的問題時(shí)，不會(huì)為此抓破頭皮，能解決你問題。最后希望大家喜歡這篇文章，如果你覺得對(duì)你有所幫助，可以推薦給你的朋友，或者有更好的分享可以在下面的評(píng)論中直接給我們留言。
相關(guān)文章
- iPhone 6s如何開啟觸控按鈕，因?yàn)槲覀冎澜?jīng)常使用home按鈕對(duì)手機(jī)硬件損耗比較大，所以蘋果公司在手機(jī)上設(shè)置了一個(gè)觸控按鈕，可以做為home按鈕使用2016-04-26
iPhone主屏Home按鈕怎么調(diào)節(jié)亮度？
iPhone主屏Home按鈕怎么調(diào)節(jié)亮度？。今天這里要說的是另外一個(gè)關(guān)于可以通過Home按鈕來調(diào)節(jié)屏幕亮度的功能，這對(duì)于哪些經(jīng)常會(huì)在夜里看新聞、看小說的小伙伴而言是一件好事情2015-05-26iPhone手機(jī)怎么關(guān)閉照片拍好后的分享按鈕？
iPhone怎樣關(guān)閉照片分享端口?有人在拍完照片之后，喜歡點(diǎn)擊立即分享到微信朋友圈、微博、或者直接分享給QQ好友，而有人就不喜歡這樣的分享，下面教大家關(guān)閉分享功能的教程2015-04-26- 這篇文章主要介紹了用CSS3寫出iPhone中的返回按鈕,需要的朋友可以參考下2015-04-04
- 有時(shí)候看完朋友圈，想要返回時(shí)，卻發(fā)現(xiàn)按了返回按鈕不管用，原因是由于 iOS 系統(tǒng)升級(jí)以后，導(dǎo)致微信與系統(tǒng)不兼容造成的，下面是可行的解決方法，感興趣的朋友可以看看2015-03-31
iPhone6微信返回卡住該怎么辦？微信返回按鈕不能用的解決辦法
iPhone6微信返回卡住該怎么辦？最近大家在升級(jí)了 iOS8.2 系統(tǒng)以后，很多朋友都發(fā)現(xiàn)有時(shí)候左上角的返回按鈕不好使了。這個(gè)問題其實(shí)是微信應(yīng)用與系統(tǒng)的兼容性導(dǎo)致的，因?yàn)橐?/div> 2015-03-26ipad/iPhone 引導(dǎo)式訪問按鈕有什么作用該怎么使用
ipad/iPhone中有一個(gè)引導(dǎo)式訪問按鈕，不知道這個(gè)按鍵是有什么作用的，也不知道怎么使用，你若不知道，可以看看下面的對(duì)其的詳細(xì)介紹2014-10-31CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認(rèn)樣式
之前寫了一個(gè)登錄表單頁面，再iphone上測試遇到了一些奇怪的問題：表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會(huì)出現(xiàn)圓角的情況；input[type="text"]文本輸2014-10-11蘋果iPhone safari瀏覽器樣式重置修復(fù)submit按鈕圓角bug
剛接觸寫手機(jī)頁面 或許都會(huì)遇到iPhone的safari瀏覽器上submit按鈕圓角bug，下面為大家介紹蘋果瀏覽器樣式如何重置submit，需要的朋友可以參考下2014-06-26iPhone怎么設(shè)置按鈕形狀 iPhone按鈕形狀設(shè)置方法
蘋果手機(jī)一般默認(rèn)返回鍵或者取消鍵是沒有按鈕圖標(biāo)的，有人可能更喜歡按鈕形狀的圖標(biāo)，這樣看起來使人看到更生動(dòng)，那么下面腳本之家小編就來給大家介紹下iPhone按鈕形狀設(shè)置2016-05-11最新評(píng)論