Mobile Safari (iPad) 中的背景图像渲染问题答案

【问题标题】：Background image rendering issues in Mobile Safari (iPad)Mobile Safari (iPad) 中的背景图像渲染问题
【发布时间】：2011-06-09 11:49:18
【问题描述】：

我在使用 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，但没有成功。知道发生了什么吗？

提前致谢。

【问题讨论】：

标签： html css mobile safari html-rendering

【解决方案1】：

我希望有一种方法可以对此进行试验，因为我没有 iPad——但可以指定 border : none; 吗？

您可以尝试使用单个 div，将选项卡的“末端”作为绝对定位的图像到 left : 0 和 right : 0 ...另一种方法看起来应该没有什么不同，但可能会解决问题?如果您需要标签图形上的透明背景，您绝对可以将图像放置在 div 之外，并相应地调整边距/填充。

【讨论】：

感谢您的回答。让我测试一些不同的配置，看看是否能解决问题。

【解决方案2】：

我认为这是由于背景图层没有被正确屏蔽，或者至少这是我的问题。当多个背景相互叠加时，似乎会发生这种情况。

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

根据该线程中某人的建议，我添加了这个

border: 1px solid transparent;

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

【讨论】：