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

最新推荐文章于 2022-10-21 11:30:17 发布

axl234

最新推荐文章于 2022-10-21 11:30:17 发布

阅读量196

点赞数

分类专栏： css 文章标签：前端 ui ViewUI

本文链接：https://blog.csdn.net/axl234/article/details/84521525

版权

css 专栏收录该内容

104 篇文章 0 订阅

订阅专栏

最近做移动端的页面，碰到了一个问题，就是css无法定义按钮样式，包括input :submit,:button及button标签等，如图，左边是设计稿，右边是iOS下显示的效果；stackoverflow搜索了一下，http://stackoverflow.com/questions/5438567/css-submit-button-weird-rendering-on-ipad-iphone，找到了解决方案，就是在按钮元素上加个样式：

 
          1 
        
         -webkit-appearance 
         : 
         none 
         ;

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

 
          1 
        
          2 
        
          3 
        
          4 
        
          5 
        
         -webkit-appearance 
         : 
         none 
         ; 
        
         -moz-appearance 
         : 
         none 
         ; 
        
         -moz-border-radius 
         : 
         15px 
         ; 
        
         -webkit-border-radius 
         : 
         15px 
         ; 
        
         border-radius 
         : 
         15px 
         ;