chrome 在 div 下创建额外的空间答案

【问题标题】：chrome creating extra space beneath divchrome 在 div 下创建额外的空间
【发布时间】：2013-04-29 06:21:03
【问题描述】：

我遇到了一个错误，即 chrome 在 iframe 下方插入了最少量的额外空间。见这里http://jsfiddle.net/hrp27/。整个代码是

<div class="subwindow" style="overflow-y: auto;">
    <div id="blog" style="line-height: 0px;">
        <div class="container-fluid main-holder">
            <iframe src="http://elju.github.io" frameborder="0">
            </iframe>
        </div>
    </div>
</div>

同样的问题在 Firefox 中不会发生。我已经看了一段时间，无法判断是什么导致了问题。我问是因为我在我的网站http://secure-shore-8758.herokuapp.com/ 上遇到了类似的问题。由于某种原因，Chrome 似乎会在我的代码中自动插入一个溢出-y：自动，而无需我告诉它。如果有人能解释这种行为，那就太好了！

【问题讨论】：

能否也贴出你相关的css代码？
这实际上是完成它所需的所有代码。如果你在 chrome 中打开那个小提琴，它在最右边有滚动条，但在 Firefox 中不会发生同样的情况。

标签： google-chrome firefox positioning

【解决方案1】：

您的“博客”元素上有一个属性“行高：0px”。删除它以修复多余的空间

或者您可以像这样将子窗口类的overflow-y属性更改为“none”：

 <div class="subwindow" style="overflow-y: none;">
    <div id="blog" style="line-height: 0px;">
        <div class="container-fluid main-holder">
            <iframe src="http://elju.github.io" frameborder="0">
            </iframe>
        </div>
    </div>
</div>

【讨论】：

谢谢！但是你知道为什么这发生在 chrome 而不是 firefox 中吗？而且，我很困惑为什么指定 line-height 为 0px 会使 div 改变位置。 Chrome 开发人员工具包告诉我 .blog 和 .subwindow 的像素高度相同，所以我真的很困惑导致滚动条出现的原因。