Question

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

我无法准确确定导致它的原因。有时，一个页面包含2个表，一切都很好。然后你需要添加第三个，然后显示该行。甚至不需要是表btw。

有时，重置css可以解决它。将我们在body上设置的相同行高设置为链接：

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

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

我注意到当有像表，输入，textareas这样的元素时，这个问题更有可能发生。 “重置”他们的属性，有时也会解决它。

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

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

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

这个没有： FireFox 3 line-height

检查此屏幕截图，如果您仍然没有看到我在说什么： enter image description here

在已建立的（或非）网站上出现此问题让我觉得这是一个IE9错误，唯一明确的修复方法总是使用白色背景，所以没有人会注意到白线（线仍然会在那里虽然）。但那显然不是最好的选择。我从未在Chrome或Safari中找到此白线。

那么，是否有人面临同样的问题并获得了更好的解决方案？

Answer 1

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

所以，如果你有一些像

这样的标记

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

你会在底部获得额外的空间。要摆脱它，你必须使用块元素，或设置为你的内联元素css样式'display：block'

Answer 2

我找到了问题的解决方案，如果是一个愚蠢的问题：将浏览器窗口的最大化/恢复向下设置为最大化（=工具提示文本;这表示窗口处于非最大状态）。使浏览器窗口实际上小于屏幕适合度。在此状态下按F11键，屏幕底部没有白线（Win7 x32＆amp; x64）。（BTW，FF剂量没有这个问题，是最好的选择。）

Answer 3

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

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

亲自尝试：getComputedStyle(document.querySelector('h2')).fontSize

浏览器很难渲染分数像素，因此可能会混淆并在底部添加一个像素。

顺便说一句，Firefox也有一些麻烦。页脚线之间的间距偏离了一个像素。

修复很明显：使用整数像素来声明font-size s。

Answer 4

另一种方法是将内容仅应用于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");
        }
    });
}

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

4 个答案: