Обновление (25 Сентября 2017)

К великому моему облегчению, в [в Firefox ошибка][ошибка] описанное ниже является фиксированной, как в Firefox 53 и ссылку на этот ответ, наконец, был [удален из загрузки's документация][загрузки-удалить].

Исправление

В WebKit и Firefox 53+, вы просто установите мин-ширина: 0; На полей, чтобы переопределить значение по умолчаниюмин-контента.¹

Все-таки Firefox-это немного... странно, когда дело доходит до fieldsets. Чтобы сделать эту работу в более ранние версии, необходимо изменить свойство display из полей в одно из следующих значений:

• таблица-ячейки (рекомендуемые)
• стол-столбец`
• таблица-столбец-группа`
• таблица-колонтитул-группа`
• таблица-заголовок-группа`
• таблица-строки`
• таблица-строки-группа`

Из них я рекомендую таблица-ячейки`. Как строка таблицы " и "таблица-строки-группы`, чтобы изменить ширину, а в таблице-столбец" и " таблица-столбец-группы, чтобы изменить высоту.

Это (отчасти обоснованно) перерыв рендеринга в IE. Так как только геккон нуждается в этом, вы можете вполне обоснованно использовать [@-МОЗ-документ][МОЗ-документ]—один из [Мозилла'с фирменной УСБ расширения][Мозилла-ус]—скрывать это от других браузерах:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(Здесь'ы [jsFiddle демо][jsfiddle].)

Все исправить, но если вы'вновь что-нибудь вроде меня ваша реакция была что-то вроде...

[Какой.][плоский-что]

Есть такое причины, но это's не достаточно.

Презентации по умолчанию элемент полей абсурдна и практически невозможно указать в CSS. Подумайте об этом: полей'ы граница исчезает, где он'ы перекрывается элемент легенды, но фон остается видимым! Там's никакой способ воспроизвести это с любой другой комбинацией элементов.

В довершение всего, реализаций полно уступки устаревших поведения. Одним из таких является то, что минимальная ширина полей не меньше, чем внутренняя ширина его содержания. В WebKit дает вам способ, чтобы переопределить это поведение путем указания его в таблице стилей по умолчанию, но Гекко² идет на шаг дальше и [применяет его в движок][полей-источник].

Однако, внутренние элементы таблицы представляют собой [специальный каркас тип][внутренний-таблицы-источника] в Гекко. Размерные ограничения для элементов с заданными значениями этих "дисплей", расположенном в [отдельный код путь][таблица-ширина-источник], полностью избежать насильственных минимальная ширина наложенных на fieldsets.

Опять же—[для этого ошибка][ошибка] исправлена начиная с Firefox 53, так что вам не нужен этот хак, Если вы не только на новые версии.

С помощью @-МОЗ-документ безопасный?

На этот вопрос, да. @-МОЗ-документ работает как положено во всех версиях Firefox до 53, Где эта ошибка исправлена.

И это не случайно. Отчасти этот ответ, ошибки на [пределе `@-МОЗ-документ для пользователя/УА стили][МОЗ-документ-ошибка] было поставлено в зависимость от базовых полей исправления ошибки в первую очередь.

Помимо этого, я не рекомендую использовать `@-МОЗ-документ на исключительно целевой Firefox в ваш CSS, другие ресурсы несмотря на.³

¹ значение может иметь префикс. По словам одного читателя, это не имеет никакого эффекта в стокового браузера Android 4.1.2 и, возможно, другие старые версии; у меня не было времени, чтобы проверить это.

² все ссылки на геккона источник в ответе на этот вопрос ссылаются на [5065fdc12408 правок][изменений], совершил 29ᵗʰ июля 2013; вы, возможно, пожелает сверить с [последняя редакция от Mozilla Центральный][Гекко-последний].

³ см., например, [так #953491: таргетинг только Firefox с помощью CSS][так-для Firefox-для CSS] и [УСБ хитрости: в CSS хаки таргетинга для Firefox][модели CSS-уловок, которые] на основе многих статей на громких сайтах.

в

[загрузки-удален]: протокол HTTPS://github.com/twbs/bootstrap/pull/21262

[МОЗ-документ-ошибка]: протокол HTTPS://bugzilla.mozilla.org/show_bug.cgi?id=1035091#c75

[jsfiddle]: на HTTP://jsfiddle.net/Jordan/hCzbH/1/

[Мозилла-Усс]: протокол HTTPS://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions

[МОЗ-документ]: протокол HTTPS://developer.mozilla.org/en-US/docs/Web/CSS/@document

[плоским, что]: на HTTP://tvtropes.org/pmwiki/pmwiki.php/Main/FlatWhat

[полей-источник]: на HTTP://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/forms/nsFieldSetFrame.cpp#l400

[внутренняя таблица-источник]: на HTTP://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/generic/nsHTMLReflowState.h#l71

[таблица-ширина-источник]: на HTTP://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/generic/nsHTMLReflowState.cpp#l1965

[ошибка]: протокол HTTPS://bugzilla.mozilla.org/show_bug.cgi?id=504622#c5

[изменений]: на HTTP://hg.mozilla.org/mozilla-central/file/5065fdc12408/

[Гекко-последний]: на HTTP://mxr.mozilla.org/mozilla-central/source/

[так-для Firefox-Усс]: протокол HTTPS://stackoverflow.com/a/953491/230390

[модели CSS-трюки]: на HTTP://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

Safari на iOS выпуск с выбранным вариантом ответа

Я нашел ответ из Иордании серый, чтобы быть особенно полезным. Однако это не'т, кажется, чтобы решить эту проблему на сафари iOS для меня.

Вопрос для меня заключается в том, что полей не может иметь ширину авто, если элемент имеет максимальную ширину в % ширины.

Исправление для проблемы

Просто настройка полей, чтобы иметь 100% ширина it'контейнер с кажется, чтобы получить вокруг этого вопроса.

Пример

fieldset {
    min-width: 0; 
    width: 100%; 
}

Пожалуйста, обратитесь к ниже рабочие примеры - если убрать % ширина от полей или заменить его с авто, он не будет продолжать функционировать.

[JSFiddle][1] | Сайт CodePen

Я боролся в течение многих часов с этим, и в принципе, браузер применяет вычисленный стиль, который необходимо переопределить в ваш CSS. Я не помню точное свойство, которое устанавливается на полей элементов и див (возможномин-ширина`?).

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

Надеюсь, что помогает.

Обновление: добавление отображения: таблица-ячейки помогает в не Chrome браузеры.

.фейк-выберите { белый-пространство:без переноса; } вызвало полей для интерпретации `.фейк-выберите элемент его первоначальной ширины, а не его принудительная ширины (даже если переполнение скрытый).

Удалить это правило, и изменение .фейк-выберите'ы Макс-ширина:100% просто `ширина:100% и все подходит. Нюанс заключается в том, что вы видите все содержимое фейк-Select, но я не'т думаю, что это все так плохо, и он подходит по горизонтали сейчас.

Обновление: с текущими правилами в следующих скрипку (которая содержит единственный реальный выбор), с полей'дети с ограничен для коррекции ширины. Помимо удаления правила .фейк-выбор и фиксация замечаний (от// комментарийк/ комментарий /, Я'вэ отметил, что изменения в скрипке'ов в CSS.

Я понимаю вашу проблему сейчас лучше, и на скрипке отражает определенный прогресс. Я набор правил по умолчанию для всех в <выбрать>S, и резерв .xxlarge для тех, которые вы знаете, будет шире, чем 480px (и это работает только потому, что вы *знаете *** ширина#просмотра, а можете вручную добавить класс для тех, кто слишком широкий. Просто требует немного тестирования)

[Доказательства](http://jsfiddle.net/trojansdestroy/NgNHc/)