解決ios safari中按鈕圓角問題

標籤：

問題描述

　　使用html5編寫頁面在移動app中嵌套，總會涉及到按鈕的使用，在android手機瀏覽器中顯示正常，但在ios safari瀏覽器中會看到按鈕顯示為圓角樣式，設定border-radius:0也不好使，其實添加css  “-webkit-appearance”就能解決問題。

 

問題

　　

 

css

input .btn{    display : inline-block ;    height : 30px ;    line-height : 30px ;    border : 0 ;    cursor : pointer ;    font-size : 15px ;    color : #fff ;    font-weight : bold ;    border-radius : 5px ;    padding : 0px 20px;    overflow : visible ;    -webkit-appearance : none ;  /*解決iphone safari上的圓角問題*/}

html

< input type ="button" class ="btn" />

 

總結

 　　使用css樣式-webkit-appearance: none;  輕鬆解決iphone safari上的圓角問題。

解決ios safari中按鈕圓角問題