解決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上的圓角問題。

 

先插入一條廣告，博主新開了一家淘寶店，經營自己純手工做的發飾，新店開業，只為信譽！需要的親們可以光顧一下！謝謝大家的支持！
店名：
　　小魚尼莫手工飾品店
經營:
　　發飾、頭花、發夾、耳環等（手工制作）
網店：
　　http://shop117066935.taobao.com/