IE9在页面底部呈现一条白线
Lic*_*ing 10 html css quirks-mode internet-explorer-9
我最近注意到几个网页,以及我自己的一些网页,当它们在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也显示了该行,但是可以改变,因为有时问题出现或在新元素显示或删除时消失):
这个问题有白线: 表格单元格中的链接填充整个行高
这个没有: FireFox 3线高
检查此屏幕截图,如果您仍然没有看到我在说什么:
在已建立的(或非)网站上存在这个问题让我觉得这是一个IE9错误,唯一明确的修复方法总是使用白色背景,所以没有人会注意到白线(尽管这条线仍然存在).但那显然不是最好的选择.我从未在Chrome或Safari中找到此白线.
那么,有没有人遇到同样的问题,并得到了更好的解决方案？
我不确定，因为这里没有 HTML，但当它显示内联内容时，它与标准浏览器行为非常相似。这是因为，当显示文本时，浏览器需要在底部为字母和符号留出一些空间，例如：“，”，“y”，“p”等，因为字母中存在一个突出到底部的部分。当您查看这张图片时，您可以更好地理解我在说什么： 内联内容如何显示的示例
所以如果你有一些像这样的标记
<body>
<div></div>
<textarea></textarea>
</body>
您将在底部获得额外的空间。要摆脱它，您必须使用块元素，或者为您的内联元素设置 css 样式“display: block”