Firefox display:table-cell 错误，或者 table-cell 是如何工作的？答案

【问题标题】：Firefox display:table-cell bug, or how does table-cell work?Firefox display:table-cell 错误，或者 table-cell 是如何工作的？
【发布时间】：2011-01-21 06:14:41
【问题描述】：

我有这个代码：

<style>
    .main-table {width: 80%;}
    .box, .placeholder-box {display:table-cell; width: 26.4%;}
</style>
</head>

<body>
<table class="main-table">
    <tr>
        <div class="box">
            <h1>Venue</h1>
        </div>

        <div class="box">
            <h1>Time</h1>
        </div>

        <div class="box">
            <h1>Registry & Gifts</h1>
        </div>
    </tr>

    <tr>
        <div class="box">
            <h1>Dress</h1>
        </div>

        <div class="placeholder-box">
            [Floral placeholder thing]
        </div>

        <div class="box">
            <h1>Contact</h1>
        </div>
    </tr>
</table>

Firefox 将 div 视为所有出现在表格之前的 dom 中，因此我的 div 没有表格布局。这似乎忽略了display:table-cell。

我做错了吗？ FF坏了吗？有没有比使用表格更好的方式在网格中进行布局？

【问题讨论】：

它应该是什么样子的？一张快速的图片（或 ASCII 艺术）会让它非常清晰。
我想要的是一张 3 x 2 的桌子；我得到的是一个接一个地布置的所有 div。

标签： html css firefox css-tables

【解决方案1】：

According to xhtml.com，tr 必须至少包含一个th 或td。 Firefox 可能仅允许th 或td，并且正在为您“修复”您的错误。

另外，你不能像这样布局你的 HTML 吗？：

.main-table {width: 80%;}
.box, .placeholder-box {display:table-cell; width: 26.4%;}

<div class="main-table">
    <div>
        <div class="box">...</div>
        <div class="box">...</div>
        <div class="box">...</div>
    </div>
</div>

这更符合display:table-cell 的目的。

【讨论】：

@thirtydot 哦哦。交叉评论。我不知道你是不同意还是澄清。
我同意并澄清。我在“所以 Firefox 确实在尝试“修复它””部分进行了编辑，试图让我的意图更清晰。
是的，有点——如果我为我的单元格分配一个固定宽度（例如 300 像素），我会得到一个表格布局，但是如果我使用相对宽度（例如 33%），FF 不会给它们都是一样的宽度，所以表格效果被破坏了。
FWIW，这种“修复”行为在 HTML5 解析算法中被称为“Foster Parenting”。您可以在这里找到详细信息：dev.w3.org/html5/spec/tokenization.html#foster-parenting
这可能会像 XHTML 一样工作，它不会进行任何类型的修复。