javascript - 带样式显示的div :table has wrong height

标签 javascript html css google-chrome firefox

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

<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 中一样呈现？

最佳答案

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

首先，一个规则为display:table的子元素可能会变成display:table-row或 display:table-cell 默认情况下，即使不是通过 CSS 规则编写的。浏览器总是尝试更正或修复此处显然无法正常工作的内容。

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

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

您可以找到错误报告 here .

关于javascript - 带样式显示的div :table has wrong height，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27925077/