[英]Fieldset with `max-height: 0` always overflows on Chrome v87+
在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 票,详见此处。
作为解决方法,您可以将其添加到字段集:
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>
原来这是一个已知的 Chromium 错误: 问题 1151858 。
截至 2020 年 12 月,这已合并到他们的主要分支中,并验证该问题不再可重现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.