HTML fieldset позволяет детям расширяться до бесконечности - PullRequest
Новая
       39

HTML fieldset позволяет детям расширяться до бесконечности

9 голосов
/ 11 ноября 2009

Я хочу поместить прокручиваемую коробку в fieldset, но столкнулся с причудой и не могу сообразить, как ее обойти. Когда вы помещаете прокручиваемый div внутрь fieldset, fieldset расширяется, вместо того чтобы прокручиваемый элемент прокручивался.

Вот контрольный пример . Следующее расширяется до бесконечности (бу): 

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

Но , если вы используете 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?

Ответы [ 5 ]

11 голосов
/ 29 июля 2013

WebKit и Firefox ограничивают наборы полей «неявной» шириной на основе вычисленной ширины их содержимого. Вот как переопределить его в каждом.

  • WebKit делает это относительно легко. Это поведение определено в таблице стилей по умолчанию, поэтому вы можете переопределить ее, указав min-width: 0 для набора полей.

  • Firefox - более сложный инструмент, поскольку ограничения ширины набора полей применяются глубоко в коде компоновки Gecko. К счастью, существует обходной путь: добавьте правило только для Gecko, чтобы задать для свойства display для fieldset значение, соответствующее одному из нескольких внутренних элементов таблицы.

Собираем все вместе: 

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 .

Обновление (25 сентября 2017 г.)

Исправлена ​​ошибка [Firefox bug] [ошибка], которая требовала взлома display: table-cell; если вы нацелены на более новые версии Firefox, вы можете пропустить это и просто использовать min-width: 0. (Спасибо @ Николай за напоминание!)

Для получения более подробной информации о том, почему это было необходимо, мой ответ на связанный вопрос содержит более полное объяснение, включая внутренние элементы браузера.

0 голосов
/ 23 июля 2015

помните

позиция: абсолютная не будет работать с дисплеем: ячейка таблицы Это то, что я имею, когда пытаюсь отладить гибкий макет

так что имейте это в виду

0 голосов
/ 01 декабря 2009

Похоже, не существует жизнеспособного решения этой проблемы. Если вам действительно нужен набор полей, вы можете использовать div, а затем оформить его так, чтобы он выглядел как набор полей, но вы столкнетесь с множеством кросс-браузерных проблем и головной боли. Лучшее решение: изменить форму так, чтобы вы больше не использовали наборы полей.

0 голосов
/ 01 декабря 2009

Это то, что вы ищете? 

<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>
0 голосов
/ 11 ноября 2009

Я не уверен, хотите ли вы этого, но это работает: 

<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, и он все равно будет работать.

...