具有“最大高度：0”的字段集总是在 Chrome v87+ 上溢出

Question

在 Chrome 86 上，max-height 小于其内容高度的 fieldset 和 overflow: hidden 将隐藏 fieldset 的内容.

然而，在 Chrome v87 (87.0.4280.67) 上，这显然发生了变化。

如果设置的 height 小于内容，则它会正确隐藏溢出。此错误仅在 max-height.

时出现

以下代码段将在 Chrome v86 及更早版本、Firefox 和 Safari 上正确呈现。在 Chrome 87 上，第一个 fieldset 将溢出。

fieldset {
    /* Reset user-agent styles */
    padding: 0;
    margin: 0;
    border: 0;
    
    overflow: hidden;
    
    /* Misc */
    background: cyan;
    margin-top: 1em;
}

<fieldset style="max-height: 9px">
  This should be half-visible
  (<code>max-height: 9px; overflow: hidden</code>)
</fieldset>

<fieldset style="height: 9px">
  This should also be half-visible
  (<code>height: 9px; overflow: hidden</code>)
</fieldset>

有解决办法吗？ ~~是否有为此提交的 Chromium 错误？我试过搜索，但没有找到任何确定的东西。~~ .

Answer 1

作为一种解决方法，您可以将其添加到 fieldset:

display: -webkit-box; 或 display: -webkit-inline-box;

fieldset {
    /* Reset user-agent styles */
    padding: 0;
    margin: 0;
    border: 0;
    
    overflow: hidden;
    
    /* Misc */
    background: cyan;
    margin-top: 1em;
}

<fieldset style="max-height: 9px; display: -webkit-box;">
  This should be half-visible
  (<code>max-height: 9px; overflow: hidden</code>)
</fieldset>

<fieldset style="height: 9px">
  This should also be half-visible
  (<code>height: 9px; overflow: hidden</code>)
</fieldset>

Answer 2

这是一个记录在案的 Chromium 错误：Issue 1151858。

截至 2020 年 12 月，此错误 已修复 并且 verified 该问题不再重现。

具有“最大高度：0”的字段集总是在 Chrome v87+ 上溢出

Fieldset with `max-height: 0` always overflows on Chrome v87+

css

google-chrome

overflow

fieldset