带样式显示的 div：表格高度错误答案

【问题标题】：Div with style display:table has wrong height带样式显示的 div：表格高度错误
【发布时间】：2015-01-13 15:02:15
【问题描述】：

我有一个 div，它用样式 display: table 包装了一个表格。表格包含高度为 500px http://jsfiddle.net/9ucm7z9h/:

的 div

<div style="width: 400px; display: table; background-color: blue;">
    <div style="height: 100px; background-color: green; overflow: scroll">
        <table style="width: 100%;">
            <tr>
                <td>
                    <div id="test" style="height: 500px; background-color: yellow;">&nbsp;</div>
                </td>
            </tr>
        </table>
    </div>
</div>

此代码在 IE 和 Chrome/Firefox 中呈现不同。这是 Chrome/Firefox 的错误吗？我该怎么做才能强制它像在 IE 中一样呈现？

【问题讨论】：

你想做什么？我敢肯定有比您当前的标记更容易到达那里的方法。
你想让黄色 div 的溢出可见而不是滚动吗？还是您希望蓝色 div 高 100 像素？
@TylerH 我希望蓝色 div 的高度为 100 像素，如本例所示：link 但我只能使用 overflow:scroll 更改 div 的样式，或添加一些包装 div。我无法在我的任务中更改根 div 和表。

标签： javascript html css google-chrome firefox

【解决方案1】：

这似乎是一个可以通过某种方式触发布局来消除的错误。

首先，display:table 规则的子元素可能默认变为display:table-row 或display:table-cell，即使不是通过CSS 规则编写的。浏览器总是试图纠正或修复显然不能正常工作的事情。

在此处尝试使用float 或display:inline-block 触发布局看起来修复了显示为table 的父级的不当行为，至少在Firefox 中是这样。

http://jsfiddle.net/9ucm7z9h/3/

您可以找到错误报告here。

【讨论】：

在这种情况下“触发布局”是什么意思？我一直认为它是一个特定于 IE 的术语，指的是 hasLayout，与任何其他浏览器无关。
好老的 IE 有“haslayout”的东西和怪癖或不模式，但我不谈论这个 IE 典型的东西，只是关于布局（大多数浏览器共享，包括 IE7）。例如，在处理浮动元素时基本上使用溢出：隐藏，或显示：表/内联块，甚至浮动/位置：绝对。我的英语不足以在技术上或清楚地解释，但提示：“如何处理浮动”应该足以理解我所说的“布局行为”并开始进行一些搜索:)如果你是不熟悉这个。
@BoltClock 你对链接的小提琴有什么反馈吗？
在这种情况下，我认为您所说的“布局”是块格式上下文。
@GCyrillus 谢谢，它有效。我发现了这个问题的错误报告：250770。他们用表格包装 div(overflow:scroll) 作为解决方法。