gpt4 book ai didi

html - IE9 渲染问题 - 空白条(水平线)

转载 作者:行者123 更新时间:2023-11-28 01:50:18 30 4
gpt4 key购买 nike

我有非常简单的 html,如下所列。在 Firefox 和 Chrome 中运行良好。在 IE8 中也运行良好。但是当我升级到 IE9 时,它在灰色边框内显示一条白线。我们需要做什么才能让它像 Chrome/Firefox 一样工作。

注意:当缩小范围为 70%-85% 时会出现此问题。

更新引用

  1. White-space lines in Internet Explorer caused by elements that have layout

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style type="text/css">
.TransactionHistoryborderForTitle {
border: 3px solid #9B9B9B;
clear: left;
width: 976px;
margin: 0px 0 0px 10px;
}
</style>

</head>
<body>
<div id="body">
<div class="pageContent">
<div class="rightPart">
<div class="TransactionHistoryborderForTitle">
</div>
</div>
</div>
</div>
</body>
</html>

截图

enter image description here


最佳答案

这个问题似乎与 IE 的老 hasLayout 问题有关。

事实上,如果您更改此标记:

<div class="TransactionHistoryborderForTitle">
</div>

收件人:

<div class="TransactionHistoryborderForTitle" />

然后,您甚至无需缩放就可以清楚地看到问题。

通常,这可以通过添加 zoom: 1; 轻松解决。但在这种情况下,即使这样也行不通。

可能的解决方法是应用:

display: table-cell;

这将使 div 表现得像 td,因此布局就像表格单元格。我真的不知道这究竟是如何工作的,但也许它允许折叠空白。

本文讨论了同一问题:http://www.table2css.com/articles/white-space-lines-internet-explorer-caused-elements-have-layout

(注意:以上链接目前无效)

另一篇文章解释了 haslayout 概述以及哪些属性可以触发 haslayout:

http://www.satzansatz.de/cssd/onhavinglayout.html

希望对您有所帮助。

关于html - IE9 渲染问题 - 空白条(水平线),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20494878/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com