Question

我想在fieldset内放一个可滚动的框，但我遇到了一个怪癖，我无法弄清楚它的方式。当您将可滚动的div放在fieldset内时，fieldset会展开，而不是使可滚动元素滚动。

这是a test case。以下内容无限扩展（boo）：

<div style="width: 300px; overflow: hidden;">
   <fieldset>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

但是if you use a div，它按预期工作（欢呼！）：

<div style="width: 300px; overflow: hidden;">
   <div>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </div>
</div>

如何让fieldset表现得像div？

Answer 1

WebKit和Firefox将字段集限制为基于其内容的计算宽度具有“隐式”宽度。以下是如何在每个中覆盖它。

WebKit让它变得相对简单。此行为在默认样式表中定义，因此您可以通过为字段集指定min-width: 0来覆盖它。
Firefox是一个更难处理的问题，因为在Gecko布局代码中强制实施了字段集宽度约束。幸运的是，有一种解决方法：添加一个仅Gecko规则，将fieldset的display属性设置为与多个内部表元素之一对应的值。

全部放在一起：

fieldset { min-width: 0; }

/* FF hack; not needed for newer versions */
@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */
    fieldset { display: table-cell; }
}

<强> jsFiddle demo

更新（2017年9月25日）

[Firefox]错误[bug]需要display: table-cell黑客已经修复了;如果您要定位较新版本的Firefox，则可以省略它并只使用min-width: 0。（感谢@Nikolay提醒！）

有关以前需要的原因的详细信息，my answer对related question有更全面的解释，包括血腥浏览器内部。

Answer 2

我不确定你是否想要那个，但这是有效的：

<div style="width: 300px; overflow: auto;">
   <fieldset>
      <div style="overflow: auto; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

您也可以删除根div，它仍然有效。

Answer 3

这个问题似乎没有可行的解决办法。如果你真的想要一个字段集，你可以使用div然后将它设计为看起来像一个字段集，但是你会遇到大量的跨浏览器问题和令人头疼的问题。最佳解决方案：重构表单，以便您不再使用字段集。

Answer 4

这就是你要追求的吗？

<div style="overflow: auto; width: 300px; height: 55px;">
   <fieldset style="overflow: scroll; width: 100%; white-space: nowrap;">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

Answer 5

记得

position：absolute不能与display：table cell一起使用这是我在尝试调试flex布局时所拥有的内容

所以请记住它

HTML fieldset允许子项无限扩展

5 个答案:

更新（2017年9月25日）