android - div下奇怪的细线，android上有部分透明的背景

Question

好吧，标题结合我猜的屏幕截图解释了所有内容。

标题的 CSS 如下所示：

#mainHeader {
    background: url(../img/header.png) repeat-x;
    width: 100%;
    height: 60px;
    margin: 0 auto;
}

图片的高度正好是 60 像素，当然我已经检查过这条线是否不是偶然地成为背景图片的一部分。不是，但有趣的是，如果我将#mainHeader 的高度设置为 59px，这条线就会消失。

有谁知道这可能是关于什么的？它是一个错误吗？或者一些我不知道的 CSS 属性很容易修复的东西？

提前致谢！

奇怪的线

score 0 · Accepted Answer

尝试添加overflow:hidden到#mainHeaderCSS。这告诉浏览器不要在之外呈现任何子内容div，并且可能会解决问题。

score 0 · Accepted Answer

使用半透明*.pngs 时我遇到了同样的问题。这似乎是由于 Android 缩放图像的方式。似乎有两个可以解决这个问题：

background-position, background-size- 只是摆弄这两个选项（例如，仅移动 1px）似乎有帮助。但是，此问题可能是特定于解决方案的，因此这可能不适用于所有设备。
用 CSS3 替换所有半透明图层linear-gradient效果很好。linear-gradient在所有移动浏览器中都得到了很好的支持，所以我认为这是最好的方法。

2 回答 2