html - Firefox 对 "display:table-cell; vertical-align:bottom;"的理解不同

Question

我有一个包含多个 span 的 table。我动态设置这些 span 的高度并以百分比(一种条形图)工作。这些 span 的容器具有固定高度，我需要它保持非常固定。我还需要它们从下到上呈现，因此我在容器上设置 display:table-cell;垂直对齐:底部；。当高度的总百分比大于 100% 时，内容需要保持隐藏状态。 Chrome、Internet Explorer 和 Opera(类似 Chrome 的版本...)“隐藏”了内容，但 Firefox 更改了表格单元格/容器的高度(JSFiddle)。

将容器设置为 display:block; 解决了“高度增长”问题，但不允许内部 span 自底向上呈现。

如何“修复 Firefox”？

HTML 结构:

<hr/>
<table>
    <tbody>
        <tr>
            <td> 
                <span class="holder">
                    <span id="first"></span>
                    <span id="second"></span>
                    <span id="third"></span>
                    <span id="forth"></span>
                </span>
            </td>
            <td> 
                <span class="holder">

                </span>
            </td>
        </tr>
    </tbody>
</table>
<hr/>

CSS(“缩小”以节省空间):

td { width:90px; overflow:hidden; padding:0px; background-color:yellow; }
td span.holder { width:89px; height:100px; border:1px solid black; padding:0px;
    background-color:green; display:table-cell; vertical-align:bottom; }
span.holder span { display:block; border:1px solid black; }
#first { height:30%; background-color:red; }
#second { height:30%; background-color:blue; }
#third { height:20%; background-color:yellow; }
#forth { height:30%; background-color:cyan; }

编辑:在此示例中，总百分比等于 110%(相对于 holder span 的高度)。部分内容不会也不应显示。 Chrome、Internet Explorer 和 Opera“隐藏”了 first span 的一部分，而 Firefox 扩展了 holder 父级以适应内容。

Answer 1

vertical-align 在这里并不重要。

您正在为 span.holder 使用 display:table-cell;。现在，这会在表格单元格内生成一个表格单元格。从那里会发生什么？

Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element.

http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

因此，您的表格单元格实际上包含表格本身，并且这些表格各有一行和一列。

让我们专注于这个“表”:

 <!-- (anonymous table) -->
     <!-- (anonymous tbody) -->
         <!-- (anonymous table-row) -->
            <span class="holder"><!-- table-cell -->
                <span id="first"></span>
                <span id="second"></span>
                <span id="third"></span>
                <span id="forth"></span>
            </span>

Fiddle

现在，这些元素的高度是如何计算的？

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height).

http://www.w3.org/TR/CSS21/tables.html#height-layout

现在，我们有 height = 100px，MIN = 110px + 8px。所以，我认为 Firefox 是正确的，尽管规范对于如何确定确切 MIN 不是很清楚。 更新:我发现它:“如果任何剩余的单元格，那些在底部或中间对齐的单元格，其高度大于该行的当前高度，则该行的高度将增加到这些细胞的最大值”

作为“修复”，在 .holder 上使用 display:block;