iOS下无法正常渲染按钮的问题

最近做移动端的页面,碰到了一个问题,就是css无法定义按钮样式,包括input :submit,:button及button标签等,如图,左边是设计稿,右边是iOS下显示的效果;

11

stackoverflow搜索了一下,?http://stackoverflow.com/questions/5438567/css-submit-button-weird-rendering-on-ipad-iphone?,找到了解决方案,就是在按钮元素上加个样式:

-webkit-appearance : none ;

官网上文档:https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_appearance

MDN上也有相关的描述:?https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance?redirectlocale=en-US&redirectslug=CSS%2F-moz-appearance

测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用?border-radius属性修改,例如:

-webkit-appearance : none ;
-moz-appearance : none ;
-moz-border-radius : 15px ;
-webkit-border-radius : 15px ;
border-radius : 15px ;

ps,最近做移动端的页面制作坑还是挺多的,一个一个去踩呗。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » iOS下无法正常渲染按钮的问题

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏