You are here

解决ios 苹果 iphone safari中按钮圆角问题【原创】有大用

星期二, 2016-08-30 15:21 — adminshiping1

下面是我亲自做的
.classinput{
-webkit-appearance: none; border-radius: 0;
}

问题描述

　　使用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上的圆角问题。
再使用 border-radius:0;

来自 http://www.cnblogs.com/qiongmiaoer/p/3573211.html

普通分类:

div+css

搜索表单

用户登录

You are here

解决ios 苹果 iphone safari中按钮圆角问题【原创】 有大用

友情链接

解决ios 苹果 iphone safari中按钮圆角问题【原创】有大用