Mobile Safari (iPad) 中的背景图像渲染问题
使用 Mobile Safari 和 iOS 浏览网页时，我遇到了简单但意外的渲染问题。
基本上，我的页面有选项卡，它们由三个 div 和选项卡中心 div 内的“a href”组成。两侧的 div 包含背景，而中心的链接包含图像。由于某种原因，a href 上的背景在 Mobile Safari 上显示水平黄线：
https://i.sstatic .net/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，但没有成功。知道发生了什么吗？
提前致谢。
I'm experiencing a simple, yet unexpected rendering issues when browsing my webpage using Mobile Safari and iOS.
Basically, my page has tabs, which are made of three divs and a "a href" inside the center div of the tab. The divs on the sides contain a background while on the center the link has an image. For some reason, the background on the a href displays horizontal yellow lines on Mobile Safari:
https://i.sstatic.net/jlKHf.jpg
While on desktop browsers it works fine:
[couldn't add another link, it should be whiteish]
.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;
}
I've tried with a different image, no success. I tried adding the background to the center div, no success. Any idea of what's happening?
Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我希望有一种方法可以对此进行实验，因为我没有 iPad，但可能指定
border : none;？您可以尝试使用单个 div，将选项卡的“末端”作为绝对定位的图像到
left : 0和right : 0...这是一种替代方法，应该看起来没有什么不同，但可以解决问题吗？如果您需要选项卡图形上的透明背景，您绝对可以将图像放置在 div 之外，并相应地调整边距/填充。I wish there was a way to experiment with this, seeing as I don't have an iPad--but possibly specify a
border : none;?You could try a single div, with the 'ends' of the tab as absolutely positioned images to the
left : 0andright : 0...an alternative method that shouldn't look any different, but may fix the issue? If you need the transparent background on the tab graphics, you could absolutely position the images outside of the div, and adjust the margin/padding accordingly.我认为这是由于背景图层没有正确遮盖，或者至少这是我的问题。当有多个背景相互重叠时，似乎就会发生这种情况。
单/子像素未对齐ipad 和 iphone safari 上的 div
按照该线程中某人的建议，我将其添加
到出现奇怪线条的 div 中，并修复了它。
I think this is due to background layers not getting masked correctly, or at least that was my problem. It seems to happen when there are multiple backgrounds overlaid over each other.
Single/sub pixel misalignment of divs on ipad and iphone safari
Following the advice of someone in that thread, I added this
to the div that was getting the weird lines, and that fixed it.