iOS 上出现的 CSS 背景线

Question

我有 3 个带有背景的 div。 IOS 接缝在从 iPhone 到 iPAD 的所有格式上在它们之间添加一条白线。最初我认为这是表格的问题，但它也适用于 div。

#cbtop {
    height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmain.png) center top repeat-y;
}
#cbbottom {
    height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmain.png) center bottom repeat-y;
}
#content {
    min-height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmains.png) center top repeat-y;
}

此处仅在 iOS 上显示 - http://www.golfbrowser.com/courses/wentworth-east/

有什么想法吗？

很棒

Answer 1

那条白线实际上是两个重叠的div。这是 iOS 的 safari 上的一个精度问题，并且几乎是不可避免的(恕我直言)。放大时问题最为突出，因为此时会出现精度不足的情况。

您可能能够通过在底部 div 上使用半像素的顶部边距来“欺骗”浏览器正常工作...但是我无法对此进行测试。

在这种情况下，我会使用 css border radius 来实现相同的效果...虽然它不会在所有 浏览器中正确显示，但您仍然会发现它是一个可以接受的解决方案

#cb
{
    background: rgb(255,255,255); // fallback for browsers without alpha support
    background: rgba(255,255,255, 0.5);

    border-radius: 30px;
}

还有 webkit 和 mozilla 版本的 border radius 属性...这将有助于跨平台兼容性。

在此处查看有关背景 alpha 透明度的更多信息:http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

参见 JS Fiddle:http://jsfiddle.net/xixionia/4SYP4/