问题描述
使用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/