Safari在iPad上渲染背景色作为背景图像的边框

Question

此bug已被讨论here，但我还没有找到解决方案。

我的背景图像的顶部和底部有小线条，似乎是背景色。背景图像高度和容器高度都是相同的（29px），并且图像不透明，而是具有白色背景。容器上没有边框，所以这让我有点难倒。这在Mac上的Safari看起来很好，但在iPad上显示了上述问题。

HTML：

<a class="help" href="#">Help</a> 

CSS：

.help { 
color: #fff; 
display: block; 
float: left; 
font-size: 12px; 
font-weight: bold; 
background-image: url(../img/help.png); 
background-repeat: no-repeat; 
background-color: #ee3224; 
height: 29px; 
line-height: 29px; 
padding: 0 10px 0 26px; 
text-transform: uppercase; 
position: absolute; 
left: 0; 
top: 0; 
} 

Answer 1

我有同样的问题，这似乎是一路iPad的Safari浏览器之间的差来计算IMG大小和它的容器块大小。

这更是这里https://stackoverflow.com/a/6324025/1210282

的解决方案是给1px的轮廓添加到您的图像停止后台通过

Answer 2

流血，我发现了一个解决方案进行讨论。

这很简单，只需使用：

background-clip: content-box; 
background-size: cover; 

在背景色和背景图像设置。

Answer 3

因为我在哪里这个错误是发生在中，有什么做的把戏对我来说填充是：

background-clip: padding-box;