为什么将表格行元素的位置从“静态”更改为“绝对”返回到“静态”会导致永久高度更改？ [英] Why does changing the positioning of a table-row element from 'static' to 'absolute' back to 'static' result in a permanent height change?

问题描述

display：table-row div与 height：75px 嵌套在 display：table div with height：100px

子项的高度为 100px 最初与 position：static

通过改变位置的子元素<绝对，然后返回到 static ，子元素的高度永远从<$ c $变化c> 100px 到 75px 。

只有当父元素是一个表，并且子表是行表和时，才会出现它显然只在WebKit中; firefox / IE变回100px高度，但Chrome / Safari不能。

 < div id =div1> 
< div id =div2> 
你好，世界！ 
< / div> 
< / div> 
 
＃div1 
 {
 display：table; 
 height：100px; 
} 
 
＃div2 
 {
 display：table-row; 
 height：75px; 
} 
  

这里是jsfiddle ，带有定位类型/高度的示例和输出。

我最初注意到它通过混淆Chrome开发人员工具中的CSS属性，因此它不是jsfiddle或jQuery特有的。

为什么高度永久改变？

规范：

当height属性导致表高于其他值时，CSS 2.1并未定义多余的空间分布。

以下是看来正在发生的事情，至少基于我自己的观察：

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




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




3. 将元素返回给i时（静态位置），它会恢复到一个表格行（因为它应该），但由于某种原因，Chrome / Safari将 75px 保留为一个块框，而其他浏览器会根据表重新计算高度，而忽略其指定的高度。

行为，是否有任何浏览器可以说有错误或不正确的行为是有争议的。不过，我会断断续续地说，这可能与Chrome倾向于在重排和重新绘制时发生严重混乱有关，因为您希望浏览器恢复所有属性并在撤消时正确重新绘制布局一个属性的变化 - 铬是臭名昭着的坏。




---





另外，正如评论中提到的，这可能有一些东西处理匿名表格对象。该规范并没有说空表需要有一个匿名行和单元格，但它看起来像Chrome可能会创建一个，以便在您第一次放置它时替换表格行，但在您将它重新放回之后忘记将其删除。



例如，如果您将一些裸文本添加为​​表格的子元素，那么浏览器将按照该规范将其包装在匿名行框中：

 < div id =div1> 
匿名行
< div id =div2> 
< p> Hello World！< / p> 
< / div> 
< / div> 
  

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




A display: table-row div with height: 75px is nested inside a display: table div with height: 100px

The height of the child is 100px initially with position: static

By changing the positioning of the child element to absolute and then back to static, the height of the child permanently changes from 100px to 75px.

It only occurs if the parent element is a table and the child is a table-row and apparently it's only in WebKit; firefox/IE change back to 100px height but Chrome/Safari don't.

<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 with the example and output of the positioning type/height.

I originally noticed it by messing with CSS properties in the Chrome developer tools, so it's not something specific to jsfiddle or jQuery.

Why does the height permanently change?

解决方案

The root of the problem lies in the fact that the table and table-row elements have specified heights, but the table height is greater than the table-row height. Since there are no other rows, this will result in undefined behavior. From the 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.

The following is what appears to be happening, at least based on my own observations:

1. Unless I'm misreading it, every browser seems to be ignoring the paragraph in the spec that specifies how to compute the height of a table-row element, and taking the table height instead.

2. When you absolutely position the table-row, its computed height changes to the specified 75px, because absolute positioning turns it into a block box and therefore its dimensions are calculated accordingly.

3. When you return the element to its static position, it reverts to a table-row (as it should), but Chrome/Safari, for some reason, keeps the 75px from when you made it a block box, while other browsers recalculate the height according to the table, again ignoring its specified height.

As this is technically undefined behavior, whether any of the browsers can be said to have buggy or incorrect behavior is debatable. However, I'm going to go out on a limb and say that this could be related to Chrome's tendency to mess up badly at reflows and repaints, since you'd expect a browser to revert all properties and repaint the layout correctly when you undo a single property change — something Chrome is notoriously bad at.

---

Alternatively, as mentioned in the comments, this may have something to do with anonymous table objects. The spec does not say that an empty table needs to have an anonymous row and cell, but it looks like Chrome could be creating one to replace the table-row when you first position it, but forgetting to remove it after you put it back in.

For example, if you add some bare text as a child of your table, which the browser will then wrap in an anonymous row box per the spec:

<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. Presumably, the remaining space is taken up by the anonymous row box, but unfortunately I'm not familiar enough with the CSS table model to comment further.

这篇关于为什么将表格行元素的位置从“静态”更改为“绝对”返回到“静态”会导致永久高度更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！