Question

此错误已经讨论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;

在iPad的徒步旅行队翻译背景颜色作为在背景图象附近的边界

3 个答案: