Question

使用Mobile Safari和iOS浏览网页时，我遇到了一个简单但意外的渲染问题。

基本上，我的页面有标签，标签由三个div和标签中心div内的“a href”组成。侧面的div包含背景，而在中心，链接具有图像。出于某种原因，a href上的背景在Mobile Safari上显示水平黄线：

http://i.stack.imgur.com/jlKHf.jpg

在桌面浏览器上，它可以正常工作：

[无法添加其他链接，应该是白色的]

.TabPanelLinks_true {
    background: url(".../seltab-center.jpg") repeat-x scroll 0 0 transparent;
}

.TabPanelElement a {
    color: #5C5C5C;
    cursor: pointer;
    display: block;
    font-family: arial,helvetica,clean,sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 22px;
    margin: 0;
    padding: 0 5px;
    text-align: center;
    text-decoration: none;
}

我尝试过不同的形象，没有成功。我尝试将背景添加到中心div，但没有成功。知道发生了什么事吗？

提前致谢。

Answer 1

我希望有一种方法可以试验这一点，因为我没有iPad - 但可能指定了border : none;？

您可以尝试使用单个div，将标签的“两端”作为绝对定位的图像添加到left : 0和right : 0 ......这种替代方法应该看起来不同，但是可以解决这个问题吗？如果您需要选项卡图形上的透明背景，您可以绝对将图像放在div之外，并相应地调整边距/填充。

Answer 2

我认为这是因为背景图层没有被正确遮盖，或者至少这是我的问题。当有多个背景叠加在一起时，似乎就会发生这种情况。

Single/sub pixel misalignment of divs on ipad and iphone safari

根据该主题中某人的建议，我添加了

border: 1px solid transparent;

到了获得奇怪线条的div，并修复了它。

移动Safari（iPad）中的背景图像渲染问题

2 个答案: