html - 为什么将表行元素的位置从 'static' 更改为 'absolute' 再回到 'static' 会导致永久高度变化？

Question

一个 display: table-row div with height: 75px 嵌套在一个 display: table div with height: 100px

child 的高度是 100px 最初是 position: static

通过将子元素的定位更改为absolute 然后再返回到static，子元素的高度从100px 永久更改为75 像素。

只有当父元素是一个表格而子元素是一个表格行时它才会发生并且显然它只在WebKit中； firefox/IE 改回 100px 高度但 Chrome/Safari 没有。

<div id="div1">
    <div id="div2">
        Hello, world!
    </div>
</div>

#div1
{
    display: table;
    height: 100px;
}

#div2
{
    display: table-row;
    height: 75px;
}

Here's the jsfiddle带有定位类型/高度的示例和输出。

我最初是在 Chrome 开发者工具中弄乱 CSS 属性时注意到它的，所以它不是 jsfiddle 或 jQuery 特有的东西。

为什么高度会永久改变？

Answer 1

问题的根源在于table和table-row元素指定了高度，但是table高度大于table-row高度。由于没有其他行，这将导致未定义的行为。来自spec :

CSS 2.1 does not define how extra space is distributed when the 'height' property causes the table to be taller than it otherwise would be.

以下是似乎正在发生的事情，至少根据我自己的观察:

1. 除非我误读了它，否则每个浏览器似乎都忽略了规范中指定如何计算表格行元素高度的段落，并取而代之的是表格高度。

2. 当您绝对定位表格行时，它的计算高度会更改为指定的 75px，因为 absolute positioning turns it into a block box因此它的尺寸是相应计算的。

3. 当您将元素返回到其静态位置时，它会恢复为表格行(它应该如此)，但是 Chrome/Safari 出于某种原因保留了 75px你把它做成一个 block 框，而其他浏览器根据表格重新计算高度，再次忽略它指定的高度。

由于这是技术上未定义的行为，因此是否可以说任何浏览器具有错误或不正确的行为是值得商榷的。但是，我要冒昧地说这可能与 Chrome 在回流和重绘时严重困惑的倾向有关，因为您希望浏览器在您撤消时恢复所有属性并正确重绘布局单个属性更改——这是 Chrome 出了名的不擅长的事情。

---

或者，如评论中所述，这可能与 anonymous table objects 有关.规范并没有说一个空表需要有一个匿名行和单元格，但看起来 Chrome 可能会创建一个来替换表行，当你第一次定位它时，但在你把它放回去后忘记删除它.

例如，如果您添加一些纯文本作为表格的子项，然后浏览器将按照规范将其包装在匿名行框中:

<div id="div1">
    Anonymous row
    <div id="div2">
        <p>Hello World!</p>
    </div>
</div>

Every browser will consistently report the height of #div2 as 75px.想必，剩余的空间被匿名行框占用了，但不幸的是，我对 CSS 表格模型还不够熟悉，无法进一步评论。