为什么将表格行元素的定位从"静态"更改为"绝对"又变回"静态"会导致永久性高度变化？

Question

阿display: table-row与DIV height: 75px嵌套在内部display: table与格height: 100px

孩子的身高100px最初是position: static

通过将子元素的位置更改为absolute然后再返回到static,子项的高度将永久地从更改100px为75px.

只有当父元素是一个表而子元素是一个表行并且显然它只在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;
}

这是jsfiddle的示例和定位类型/高度的输出.

我最初通过在Chrome开发人员工具中搞乱CSS属性来注意到它,所以它不是特定于jsfiddle或jQuery的东西.

为什么高度会永久变化？

Answer 1

问题的根源在于表格和表格行元素都有指定的高度，但表格高度大于表格行高度。由于没有其他行，这将导致未定义的行为。从规格来看：

\n\n

\n

CSS 2.1 没有定义当“height”属性导致表格比本来应有的高度更高时如何分配额外的空间。

\n

\n\n

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

\n\n

\n

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

\n

2. 当您绝对定位表行时，其计算的高度将更改为指定的75px，因为绝对定位会将其变成块框，因此其尺寸会相应计算。

\n

3. 当您将元素返回到其静态位置时，它会恢复为表格行（理应如此），但 Chrome/Safari 出于某种原因保留了将其75px设置为块框时的高度，而其他浏览器则根据情况重新计算高度到桌子上，再次忽略其指定的高度。

\n

\n\n

由于这在技术上是未定义的行为，因此是否可以说任何浏览器存在错误或不正确的行为是值得商榷的。然而，我要大胆地说，这可能与 Chrome 在回流和重绘时严重混乱的趋势有关，因为您希望浏览器恢复所有属性并重新绘制当您撤消单个属性更改 \xe2\x80\x94 时，布局正确，这是 Chrome 众所周知的糟糕之处。

\n\n\n\n

或者，正如评论中提到的，这可能与匿名表对象有关。该规范并没有说空表需要有匿名行和单元格，但看起来 Chrome 可能会在您第一次定位表行时创建一个来替换表行，但在将其放回后忘记将其删除。

\n\n

例如，如果您添加一些裸文本作为表的子项，浏览器将根据规范将其包装在匿名行框中：

\n\n

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

\n\n

#div2每个浏览器都会一致地报告as的高度75px。据推测，剩余空间被匿名行框占用，但不幸的是我对 CSS 表模型不够熟悉，无法进一步评论。

\n