Question

我有两个绝对定位的相邻元素，它们具有相同的背景颜色。它们似乎是我桌面和笔记本电脑上的一个单独元素，但在iPad上观看时，两个元素之间有一个明显可见的“边界” - 一条半透明的颜色。

如果我不得不猜测我会说这是由于在iOS浏览器中绘制矢量对象的方法不同，但这只是基于我在谈话中听到的一些模糊信息的猜测。

如果您可以在iPad上运行，这是一个完整的示例页面，可以显示问题：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            #container {
                position: relative;
                width: 200px;
                height: 40px;
                background-color: transparent;
            }

            #left {
                position: absolute;
                top: 0;
                left: 0;
                width: 50px;
                height: 40px;
                background-color: red;
            }

            #right {
                position: absolute;
                top: 0;
                left: 50px;
                width: 150px;
                height: 40px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="right"></div>
        </div>
    </body>
</html>

Answer 1

仅在Safari缩放页面时才会出现此问题。

Safari会单独缩放元素，通常会导致每个元素在一侧或多侧具有1像素宽的半透明边缘。然后当缩放的元素并排放置时，重叠的半透明边缘仍然不是100％不透明，因此一些背景会泄漏。

问题不仅限于绝对定位的元素;它适用于所有相邻元素（图像除外）。

例如，如果表格使用td { background-color:black }设置样式，则有时会在表格单元格之间显示背景的子像素条。即使是两个相邻的跨度也存在问题。

我的解决方案是重新构建页面，以便将相同颜色的相邻元素包装在容器中，并将背景应用于容器。这是很多工作。在你的情况下，快速解决方法是将div重叠1个像素。

我认为这是一个iPad错误。在缩放页面时，我的所有Windows浏览器（包括Safari）都没有这个问题。

如何摆脱iPad上Safari中相邻元素之间出现的条子？

1 个答案: