iPad 上的 Safari 将背景颜色渲染为背景图像周围的边框答案

【问题标题】：Safari on iPad rendering background-color as a border around background-imageiPad 上的 Safari 将背景颜色渲染为背景图像周围的边框
【发布时间】：2012-01-09 07:03:54
【问题描述】：

这个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;
}

【问题讨论】：

标签： ipad safari rendering

【解决方案1】：

由于我在发生此错误的框上进行了填充，所以对我来说诀窍是：

background-clip: padding-box;

【讨论】：

【解决方案2】：

我找到了解决方案。

这很简单，只需使用：

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

设置背景颜色和背景图像的位置。

【讨论】：

在尝试了十几个建议之后，这是最终对我有用的一个。我的部分问题是我需要溢出：隐藏在该 div 上，如果我将其更改为可见，其他建议确实有效。无论如何，这有效！

【解决方案3】：

我有同样的问题，它似乎是 iPad Safari 计算 img 大小的方式和它的容器块大小之间的差异。

这里有更多讨论https://stackoverflow.com/a/6324025/1210282

解决方案是在图像中添加 1px 的轮廓以阻止背景渗出

【讨论】：