Question

我在这里问了我的问题：Weird thin line under div with partially transparent background on android

但没有一个答案有效。

我也在这里找到了它：Android WebView - background PNG image causes a thin white line to appear

但那里的解决方案并不适用于我，虽然它适用于那个提问者。

我有一个非常简单的标题图片。它的上半部分是深色。底部与页面背景颜色相同。

这是一个图像链接，显示左侧大多数浏览器的样子，右侧是ipad，retina和android：

http://www.foamboaterthemovie.com/test/three.png

我认为正在发生的事情是它正在拍摄背景图像，切掉它的最顶部像素，并在标题下面重复它，出于某种原因。（我确实有重复的图像，但只有重复-x。不重复-y。我甚至尝试过指定无重复，但线仍然存在。）

我尝试过使用“overflow：none;”在标题div中。我检查了我的源图像，其中没有任何细蓝线。我试过删除：“top-margin：0px;”从我的身体CSS，这可以工作，但然后我可以在标题上方看到我的页面背景，这次在页面的最顶部创建一个浅蓝色线，我也不想要。我可以通过在屏幕顶部的背景图像后面添加深蓝色条纹来解决最后一个问题，但这似乎是一个奇怪的黑客，可能会导致其他问题。

标题背景pic与标题的高度相同。我试过玩那些，但它没有效果。

这是html：

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>TEST</title>
<meta name="description" content="TEST">
<link rel="stylesheet" type="text/css" href="201305070903.css">

</head>
<body>

<div id="boxheader" class="boxheader">
    </div>
<div id="boxcontent" class="boxcontent">
</div>

</body>
</html>

CSS：

body {
background-color:#b7e4f4;
margin:0px;
overflow:hidden;
}

.boxheader {
background:url('images/headerpic.png');
background-repeat:repeat-x;
background-position:center;
height:178px;
overflow:hidden;
}

.boxcontent {
height:450px;
width:850px;
overflow:hidden;
}

在线测试页面的链接：

http://www.foamboaterthemovie.com/test/201305070903.html

同样，它在大多数浏览器中都很好看。只有IOS（iphone retina和ipad，但不是iphone）和Android才能解决问题。

我尝试过使用不同的.png和.jpg文件，我得到的结果相同。

任何帮助都将不胜感激。

汤姆

标题边距和导致线IOS的背景图像

0 个答案: