我有 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/
有什么想法吗?
很棒
最佳答案
那条白线实际上是两个重叠的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/
关于iOS 上出现的 CSS 背景线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5939198/