Firefox理解“display：table-cell; vertical-align：bottom;”不同

Question

我的table包含多个span个。我动态设置这些span的高度并以百分比（一种条形图）工作。这些span的容器有一个固定的高度，我需要它保持非常固定。我还需要从下往上渲染它们，因此我设置了容器display:table-cell; vertical-align:bottom;。当高度的总百分比大于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在这里并不重要。

您正在display:table-cell;使用span.holder。现在，这导致表格单元格内的表格单元格。从那里发生了什么？

  

任何表元素都会自动生成必要的匿名表对象，包括至少三个对应于'table'/'inline-table'元素的嵌套对象，'table-row'元素和'table-细胞'元素。

     

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

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

  

一旦用户代理具有行中的所有单元格，就会计算“table-row”元素框的高度：它是行的计算“高度”的最大值，即每个单元格的计算“高度”行和单元格所需的最小高度（MIN）。 'table-row'的'auto'值为'auto'意味着用于布局的行高是MIN。 MIN取决于细胞盒高度和细胞盒对齐（非常类似于线盒高度的计算）。

     

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

现在，我们有高度= 100px，MIN = 110px + 8px。所以，我认为Firefox是对的，即使规格不是很明确确切地 MIN是如何确定的。 更新：我发现它：“如果任何剩余的单元格，那些在底部或中间对齐的单元格的高度大于行的当前高度，则行的高度将增加到这些单元格的最大值“

作为“修正”，请在display:block;

上使用.holder