Question

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

注意：在70％-85％范围内缩小缩放时会出现此问题。

更新参考

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

Answer 1

问题似乎与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

希望有所帮助。

IE9渲染问题 - 白色空间条（水平线）

1 个答案: