safari下按钮样式失效

最新推荐文章于 2022-06-27 16:29:38 发布

转载最新推荐文章于 2022-06-27 16:29:38 发布 · 752 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/554085

文章标签：

#php

本文介绍了如何解决iOS设备上按钮样式失效的问题。通过添加-webkit-appearance:none样式，可以确保按钮在iOS Safari浏览器中正常显示。文章还解释了appearance属性的作用及不同浏览器的支持情况。

这两天遇到一个问题，页面在安卓手机里面正常显示，但是在IOS里面按钮的样式完全失效了，一番了解之后才知道是appearance属性 的原因。

在原来的样式里面加上一行"-webkit-appearance : none ;"，IOS下的按钮样式立马显示出来了

#btn{width:80%; padding:2% 0; color:#fff; font-family: 'kaiti'; background:#F3AA3B; border:none;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    -webkit-appearance : none ;  /*解决iphone safari上的圆角问题*/