页面底部的 1px 行，但仅在移动设备中

Question

我的页面底部出现了一条奇怪的 1px 线，但仅限于移动设备。它不会在桌面上执行此操作。由于某种原因，页脚在移动设备的页面底部添加了一个额外的 1px 行，但同样，即使它是相同的代码，也不是在桌面上。它在我安装的所有移动浏览器上执行此操作。但是，如果我删除页脚，则没有 1px 行。出于某种原因，页脚会导致在移动设备中添加了这个 1px 的行。

您可以在下图中看到移动设备和桌面设备的比较。我将页面的背景颜色设为红色，以便您可以在移动设备上看到左侧显示的线条。在右边，在桌面上，相同的代码，没有偏移。

围绕该区域的显着代码非常简单，将是：

* {
    margin:0;
    padding:0;
    font-family:'Encode Sans', sans-serif;
    color:#2b2b2b;
}
body {
    background:red; 
}
.content {
    width:90%;
    margin:0 auto;
}
#footer {
    height:3em;
    line-height:3em;
    background:rgba(51,128,0,0.75);
}
#footer a {
    margin-right:0.5em;
    font-size:0.9em;
    text-decoration:none;
    color:#fff;
}

---

<div id="footer">
        <div class="content">
            <a href="">Top</a><a href="">Privacy</a><a href="">Terms</a>
        </div>
</div>

Answer 1

这是身体的一部分，所以如果你增加页脚的高度，它就不会显示。 或者 只需去除身体上的红色即可。