帶有 `max-height: 0` 的 Fieldset 在 Chrome v87+ 上總是溢出

Question

在Chrome 86，一個fieldset具有max-height小於其內容和高度的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 錯誤？ 我試過搜索，但沒有找到任何確定的東西。 有一張 Chromium 票，詳見此處。

Answer 1

作為解決方法，您可以將其添加到字段集：

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 錯誤： 問題 1151858 。

截至 2020 年 12 月，這已合並到他們的主要分支中，並驗證該問題不再可重現。