Firefox中一个长达十几年的“BUG”——fieldset标签的overflow属性无效

今天使用fieldset标签遇到的,本以为只是个小问题,没想到却成了挖坟。
示例代码:

该代码在IE8至IE11下表现正常,超出宽度后滚动:
IE8-IE10
但在Chrome47和Firefox42下与预期不符:
Chrome
Firefox

一番搜索后,得知:
Chrome下,fieldset标签的默认属性中min-width为-webkit-min-content值。而min-width的优先级大于width属性,因而内部div的width超出了fieldset的width却未出现滚动。可通过设置fieldset的min-width属性来覆盖默认值。
Firefox下,没有好的一个解决方案,只能通过hack方式解决。通过只为Firefox浏览器设置display属性为table-column值,可固定fieldset宽度。
Chrome
Firefox

另外,发现如果设置了fieldset元素的浮动属性,会造成Firefox中上述修复方式无效。目前没找到合适的解决方案。
其实,最简单的方式是绕过去,直接设定fieldset元素内的div元素宽度。
最后,祭上“BUG”截图:
Bug 261037

参考资料:
<pre>会撑开父辈<fieldset>的宽度,怎么能让pre的宽度随filedset的宽度
<fieldset> resizes wrong; appears to have unremovable min-width: min-content
@document
Bug 261037 – overflow property not implemented on fieldset

发表评论

电子邮件地址不会被公开。 必填项已用*标注