首页 > 其他 > 详细

解决ios safari中按钮圆角问题

时间:2014-03-01 00:54:41      阅读:405      评论:0      收藏:0      [点我收藏+]
 
问题描述
  使用html5编写页面在移动app中嵌套,总会涉及到按钮的使用,在android手机浏览器中显示正常,但在ios safari浏览器中会看到按钮显示为圆角样式,设置border-radius:0也不好使,其实添加css  “-webkit-appearance”就能解决问题。
 
问题截图
  bubuko.com,布布扣
 
css
bubuko.com,布布扣
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上的圆角问题*/
}
bubuko.com,布布扣

html

bubuko.com,布布扣
< input type ="button" class ="btn" />
bubuko.com,布布扣

 

总结
   使用css样式-webkit-appearance: none;  轻松解决iphone safari上的圆角问题。
 

解决ios safari中按钮圆角问题,布布扣,bubuko.com

解决ios safari中按钮圆角问题

原文:http://www.cnblogs.com/qiongmiaoer/p/3573211.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!