页面底部有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

这是身体的一部分，所以如果你增加页脚的高度，那么它将不会显示。  要么 只需从身体上移除红色。