IE9在页面底部呈现一条白线答案

【问题标题】：IE9 renders a white line in the bottom of the pageIE9在页面底部呈现一条白线
【发布时间】：2011-12-02 14:41:41
【问题描述】：

我最近在几个网页以及我自己的一些网页中注意到，当它们在 Internet Explorer 9 中显示时，当它未处于 Quirks 模式时，它会在页面底部呈现一条大约 1 像素的白线。就像 html 标记带有 padding-bottom:1px 并包裹在另一个具有白色背景的元素中（但事实并非如此，而且它没有填充）。看起来 IE9 标准和 quirks 模式之间的差异在确定包装元素的宽度时显示，但垂直。感觉就像一个元素的内容被前一个元素推了 1px，就像它们的内容一样，但不是边距或边框，而是与下一个元素的尺寸重叠。

我无法确定到底是什么原因造成的。有时，一个页面包含 2 个表格，一切都很好。然后您需要添加第三个，然后该行就会显示出来。顺便说一句，甚至不需要是表格。

有时，重置 css 可以解决问题。为链接设置与正文相同的行高：

body {
    line-height: 1
}
a, links, visited {
    line-height: 1
}

修复它，但并非总是如此。我唯一能做的就是逐个元素检查，禁用/启用他们的 css 规则，直到它消失。

我注意到，当有表格、输入、文本区域等元素时，这个问题更有可能发生。有时，“重置”它们的属性也可以解决问题。

我知道提供一个代码作为示例会更容易，但就像我说的，我无法确定它的模式。我可以给你一些我注意到错误的网站/网址示例（你必须查看页面的最底部，看看 IE 和其他浏览器（如 Firefox）之间的区别）：

casinosdelmundo.info, gatosabido.com.br, espanol.yahoo.com, en.wikipedia.org/wiki/Bruce_Beutler, ea.com/command-and-conquer-4, facebook.com（白色的，或者几乎是白色的背景，用开发者工具 f12 改变身体背景，你会看到）。我什至在 stackoverflow 找到了一个示例（就像今天一样，主页 stackoverflow.com 也显示了该行，但这可能会改变，因为有时当新元素出现或被删除时问题会出现或消失）：

这个问题有白线： Make link in table cell fill the entire row height

这个没有： FireFox 3 line-height

如果您仍然没有看到我在说什么，请查看此屏幕截图：

这个问题在非常成熟（或不是）的网站上的存在让我觉得这是一个 IE9 错误，唯一确定的解决方法是始终使用白色背景，所以没有人会注意到白线（这条线仍然存在尽管）。但这显然不是最好的选择。我从未在 Chrome 或 Safari 中找到这条白线。

那么，有没有人遇到过同样的问题并得到了更好的解决方案？

【问题讨论】：

我最近在 SO 上看到了几个 IE9 渲染问题，一些小的调整往往会解决它们（比如你如何弄乱行高）。几乎可以保证它是一个 IE 错误。也许你应该用 MS 记录这个错误。
嗯，我刚收到他们的一封电子邮件：“感谢您的反馈。我们能够重现该问题并正在对其进行调查。最好的问候，Internet Explorer 团队。”
现在你可以回去做样片了，等待 MS 修复它，阿尔萨斯。
您的电子邮件来自自动回复，没有任何意义。如果没有示例问题的链接或 jsfiddle，我们将无能为力。 IE9 是地球上最糟糕的浏览器，因此出现问题是意料之中的事。
"IE9 在您在 Microsoft Connect 站点提交的页面底部呈现白线。感谢您的反馈。我们不再使用 Internet Explorer 10 平台预览版观察此问题。如果您仍然可以重现该问题，请重新激活反馈或针对该问题提交新的反馈。”是的，它可以是一个自动回复，但看起来他们给予了一些关注。

标签： html css internet-explorer-9 quirks-mode

【解决方案1】：

我不确定，因为这里没有 HTML，但是当它显示内联内容时，它与标准浏览器行为非常相似。这是因为在显示文本时，浏览器需要在底部留出一些空间来放置字母和符号，例如：“，”，“y”，“p”等，因为在这些字母中有一个突出到底部的部分。当你看这张图时，你可以更好地理解我在说什么： example of how inline content is displayed

所以如果你有一些像

这样的标记

<body>
    <div></div>
    <textarea></textarea>
</body>

您将在底部获得额外的空间。要摆脱它，您必须在那里使用块元素，或者为您的内联元素设置一个 css 样式“显示：块”

【讨论】：

【解决方案2】：

我找到了问题的解决方案，如果是一个愚蠢的解决方案：将浏览器窗口的最大化/恢复切换设置为最大化（= 工具提示文本；这表明窗口处于非最大状态）。使浏览器窗口实际上小于屏幕大小。在这种状态下按 F11，屏幕底部没有白线（Win7 x32 & x64）。（顺便说一句，FF没有这个问题，是最好的选择。）

【讨论】：

【解决方案3】：

当您使用小数字体大小时会发生这种情况。

例如，stackoverflow 使用 h2 {font-size: 140%;} body { font-size:80%;}，这导致 h2 的总字体大小为 112%。将其应用到 16px 默认大小，您会得到 17.93px（包括 rounding errors，万岁！）

自己试试吧：getComputedStyle(document.querySelector('h2')).fontSize

浏览器很难渲染小数像素，因此可能会感到困惑并在底部添加一个像素。

顺便说一句，Firefox 也有一些麻烦。页脚行之间的间距相差一个像素。

解决方法很明显：使用整数像素声明font-sizes。

【讨论】：

【解决方案4】：

另一种方法是将 :after 内容应用于您的正文，仅适用于 IE 和 Edge。这样，您将摆脱多余的白线。我们可能还需要一些 jQuery，以便内容仅在您位于页面底部时适用。

body{
    position:relative;
    width:100%;
}
body:after{
    content: "";
    display:block;
    background-color: #000;
    height: 1px;
    bottom: 0px;
    position: fixed;
    width: 100%;
}

jQuery

//add a border to internet explorer
if (bowser.name == "Microsoft Edge" || bowser.name == "Internet Explorer") {
    //console.log(" iam inside");
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $("body").addClass("end-border");
        }
        else {
            $("body").removeClass("end-border");
        }
    });
}

【讨论】：