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

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

我无法确定究竟是什么原因造成的。有时，一个页面包含2个表格，一切都很好。然后你需要添加第三个，并显示出来。甚至不需要表btw。

有时，重置css解决了它。设置相同的线条高度，我们有正文链接：

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

修复它，但并不总是。只有我能做的事情是逐元素检查，禁用/启用他们的css规则直到它消失。

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

我知道提供代码作为例子会更容易，但就像我说的，我并没有为它确定一个模式。我可以给你一些网站/ url的例子，我注意到这个错误（你必须看看页面的最底部，看看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的bug，唯一明确的解决方法是使用白色背景，所以没有人会注意到白线（尽管如此，该线仍然存在）。但那显然不是最好的选择。我从来没有在Chrome或Safari中找到这条白线。

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

来源

2011-10-06 LichKing

我见过几个IE9渲染上最近做题，小的调整往往会解决这些问题（如你如何与行高搞砸）。它几乎保证是一个IE错误。也许你应该用MS记录这个错误。 – invertedSpear

嗯，我刚刚收到他们发来的一封电子邮件：“感谢您的反馈，我们能够重现此问题并正在对此进行调查。最好的问候，Internet Explorer团队。” – LichKing

现在你可以回到做日常事务，而你等待MS来修复它，阿尔萨斯。 – CheckRaise

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

所以如果你有一些标记，像

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

你会得到在底部多余的空间。要摆脱它，你必须使用那里要么block元素，要么设置为你的内联元素的CSS样式'显示：块'

来源

2011-10-17 17:48:24 user907860

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

来源

2012-04-20 11:58:05

它发生在使用小数字体大小时。

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

自己尝试一下：getComputedStyle(document.querySelector('h2')).fontSize

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

顺便说一下，Firefox也有一些麻烦。页脚行之间的间距由一个像素关闭。

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

来源

2012-04-20 12:53:53 user123444555621

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

来源

2017-05-24 13:53:23

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

回答

相关问题