[英]Safari bug with border radius, rounded corners, and strange background repeat
使用Safari 6.0.1和以下样式,我的按钮以“错误”方式呈现:
此错误仅在Safari中发生。
.btn {
height: 40px !important;
line-height: 40px !important;
overflow: hidden;
padding: 0 20px;
text-align: center;
margin: 0 auto;
float: left;
margin-bottom: 40px;
background-color: #15518d;
background-repeat: no-repeat !important;
border-bottom: 4px solid #032a52 !important;
text-shadow: 0 0 3px rgba(0,0,0,.2);
color: #fff !important;
font-weight: 500;
font-size: 15px !important;
border-radius: 4px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-transform: none !important;
cursor: pointer
}
正如您所看到的,按钮的右边框似乎开始“重复”,按钮的左边框具有一些应该只在底部的颜色。
有没有人遇到过这个bug或知道修复? 谢谢!
这是与启用硬件的Safari相关的错误。
您可以通过禁用“ System Preferences
”中“ Energy
”下的“ Automatic Graphics Switching
”进行验证(我假设您使用的是Mac,因为版本6+不适用于Windows AFAIK)。
因为它需要在safari代码中修复它。
您可以将按钮存储为图像,它可以在所有浏览器中使用,旧的方式 - 更多的工作(和带宽),但稳定的结果。
可能解决方案
从这篇文章: 在Safari中使用边界半径的965像素以上的杂散垂直线
添加-webkit-background-clip: padding-box;
到你的CSS。
我已经更新了小提琴
我不认为在正常情况下应该有问题,
我刚从不应删除的属性中移除了!important
。
我添加了一些悬停效果..,
只要确保你是否可以删除padding:20px
或者如果你可以减少padding:20px
,这将是我不推荐的加分点 - 至少与行高相同,你正在解决相同的目的....
如果它有帮助,尝试运行这个...
如果没有解决,请回复..
我认为你应该使用
-webkit-border-radius:5px;
你将获得所需的半径。
你可以试试这个:
.selector {
-webkit-border-radius: 10px;
-moz-border-radius:10px;
border-radius:10px;
-khtml-border-radius: 10px;
}
关注那个链接: DEMO
你可以试试这个:
.selector {
-webkit-border-radius: 10px;
-moz-border-radius:10px;
border-radius:10px;
-khtml-border-radius: 10px;
}
您也可以点这个链接: DEMO
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.