我最近在几个网页和我自己的一些网页中注意到，当它们在 Internet Explorer 9 中显示时，当它不在 Quirks 模式下时，它会在页面底部呈现一条大约 1px 的白线。这就像 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(白色的，或者几乎是白色的 bg，使用开发人员工具 f12 更改 body 背景，您就会看到)。我什至在 stackoverflow 上找到了一个例子(今天，主页 stackoverflow.com 也显示了该行，但这可能会改变，因为有时当新元素出现或被删除时问题会出现或消失):
这个问题有白线: Make link in table cell fill the entire row height
这个没有: FireFox 3 line-height
如果您仍然没看清我在说什么，请查看此屏幕截图:
在非常成熟(或不成熟)的网站上出现这个问题让我觉得这是一个 IE9 错误，唯一确定的修复方法是始终使用白色背景，所以没有人会注意到白线(该线仍然存在尽管)。但这显然不是最好的选择。我从未在 Chrome 或 Safari 中发现这条白线。
那么，有没有人遇到同样的问题并得到了更好的解决方案？
最佳答案
我不确定，因为这里没有 HTML，但是当它显示内联内容时，它非常类似于标准浏览器行为。这是因为当显示文本时，浏览器需要在底部留出一些空间用于字母和符号，例如:","、"y"、"p"等，因为在这些字母中有一个突出到底部的部分。当你看这张图时，你可以更好地理解我在说什么: example of how inline content is displayed
所以如果你有一些像
这样的标记<body>
<div></div>
<textarea></textarea>
</body>
您会在底部获得额外的空间。要摆脱它，您必须在那里使用 block 元素，或者为您的内联元素设置一个 css 样式 'display: block'
关于html - IE9在页面底部呈现白线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7680881/