文章/答案/技术大牛

发布

社区首页 >问答首页 >IE9渲染问题.空白条(水平线)

问IE9渲染问题.空白条(水平线)
EN

Stack Overflow用户

提问于 2013-12-10 12:41:20

回答 1查看 1.1K关注 0票数 2

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

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

更新参考资料

中由具有布局的元素引起的空白行

<!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>

截图

html

css

internet-explorer-9

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-12-10 13:53:03

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

希望这能有所帮助。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20494878

复制

相似问题

问IE9渲染问题.空白条(水平线)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE9渲染问题.空白条(水平线)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE9渲染问题.空白条(水平线)
EN