div下的奇怪细线与android上的部分透明背景

Question

嗯，标题解释了所有与我猜的截图相结合。

标题的CSS如下：

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

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

任何人都知道这可能是什么？这是一个错误吗？还是可以通过一些我不了解的CSS属性轻松修复的东西？

提前致谢！

Answer 1

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

Answer 2

使用半透明*.png时遇到了同样的问题。这似乎是由于Android缩放图像的方式。似乎有两个处理这个问题：

• background-position，background-size - 只是摆弄这两个选项（例如，仅移动1个像素）似乎有所帮助。但是，此问题可能是特定于解决方案的，因此这可能不适用于所有设备。
• 用CSS3 linear-gradient替换所有半透明图层完美无缺。所有移动浏览器中linear-gradient都是very well supported，因此我认为这是最佳方式。