HTML字段集允许孩子无限扩展 [英] HTML fieldset allows children to expand indefinitely

问题描述

我想在字段集中放置一个可滚动的框，但我遇到了一个怪癖，我无法弄清楚它的方式。当您将 div 放在字段集内时，字段集



这里是测试用例。以下扩展无限期（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 utestas at，pulvinar nec diam。 Donec porttitor lobortis elit quis scelerisque。 Proin在mollis nibh。 Nulla nisi dolor，rutrum nec rhoncus congue，cursus at urna。郁金香。 Aliquam justo justo，bibendum id molestie eget，dignissim sit amet sapien。白蛉非at，。or。 Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus。前庭，。。，，。。。整叶et et illa um um que que que que que que que que que que que que 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 ，它会按预期工作（hurray！）：

< pre class =lang-html prettyprint-override> < 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 utestas at，pulvinar nec diam。 Donec porttitor lobortis elit quis scelerisque。 Proin在mollis nibh。 Nulla nisi dolor，rutrum nec rhoncus congue，cursus at urna。郁金香。 Aliquam justo justo，bibendum id molestie eget，dignissim sit amet sapien。白蛉非at，。or。 Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus。前庭，。。，，。。。整叶et et illa um um que que que que que que que que que que que que 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 ？

解决方案

似乎没有可行的解决方案这个问题。如果你真的想要一个字段集，你可以使用一个div，然后将其风格看起来像一个字段集，但你会遇到吨的跨浏览器问题和头痛。最佳解决方案：重构表单，以便您不再使用字段集。

I want to put a scrollable box inside of a fieldset, but I’ve run into a quirk and I can’t figure out my way around it. When you put your scrollable div inside of a fieldset, the fieldset expands instead of making the scrollable element scroll.

Here’s a test case. The following expands indefinitely (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>

But if you use a div, it works as expected (hurray!):

<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>

How can I get the fieldset to behave like the div?

解决方案

There appears to be no viable solution to this problem. If you really want a fieldset you can use a div and then style it to look like a fieldset but you'll run into tons of cross-browser issues and headaches. Best solution: refactor the form so that you're not using fieldsets anymore.

这篇关于HTML字段集允许孩子无限扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！