欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

修復(fù)iPhone的safari瀏覽器上submit按鈕圓角bug

  發(fā)布時(shí)間:2012-12-24 11:20:00   作者:佚名   我要評(píng)論
今天在公司寫了一個(gè)登錄頁面效果,讓我碰到一個(gè)怪異的問題——"表單中的input type=submit和input type=reset按鈕在iPhone的safari瀏覽器下圓角有一個(gè)bug”很是疑惑,于是搜集整理一番,下面我來簡單的描述一下這個(gè)bug的樣子

自從完成上次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"]樣式代碼:

復(fù)制代碼
代碼如下:

.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)容和我碰到的問題可真是一模一樣,按其方法在樣式中加入:

復(fù)制代碼
代碼如下:

.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上就不生效了。要想讓他生效,就需要在樣式中明確的指名:

復(fù)制代碼
代碼如下:

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

告訴瀏覽器我們不希望按鈕按蘋果的默認(rèn)UI來渲染。

那么"-webkit-appearance"對(duì)button還有什么影響呢?大家可以參考下面的截圖:

上圖所顯示的效果,都將button設(shè)置了:

復(fù)制代碼
代碼如下:

.button {
border-radius: 0;
}

效果圖明顯的告訴我們,在不同的“-webkit-appearance”選值情況下,button所渲染的效果是不一樣的,詳細(xì)的測試代碼大家可使用safari瀏覽器點(diǎn)擊這里。有關(guān)于“-webkit-appearance”的詳細(xì)介紹,這回算是知道了,最后我建議大家,我們可以直接在“reset.css”樣式文件中加處這么一句:

復(fù)制代碼
代碼如下:

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)文章

最新評(píng)論