<fieldset> изменяет размер неправильно; кажется, имеет неустранимую `min-width: min-content`

Проблема

У меня есть <select>, где одно из его текстовых значений <option> очень велико. Я хочу изменить размер <select>, чтобы он никогда не был шире его родительского элемента, даже если он должен отключить отображаемый текст. max-width: 100% должен сделать это.

Перед изменением размера:

Что я хочу после изменения размера:

Но если вы загрузите этот пример jsFiddle и измените размер ширины панелей результатов меньше, чем на <select>, вы можете видеть, что выбор внутри <fieldset> не позволяет уменьшить его ширину.

Что я действительно вижу после изменения размера:

Однако эквивалентная страница с <div> вместо <fieldset> действительно масштабируется должным образом. Вы можете видеть, что легче проверить свои изменения, если у вас a <fieldset> и a <div> рядом друг с другом на одной странице. И если вы удаляете окружающие теги <fieldset>, то выполняется изменение размера. Тег <fieldset> каким-то образом вызывает разрыв горизонтального изменения размера.

Действия <fieldset> выглядят так, как будто существует правило CSS fieldset { min-width: min-content; }. (min-content означает грубую наименьшую ширину, которая не приводит к переполнению дочернего элемента.) Если я заменил <fieldset> на <div> с min-width: min-content, он выглядит точно так же. Тем не менее, нет правила с min-content в моих стилях, в таблице стилей по умолчанию в браузере или в Firebugs CSS Inspector. Я попытался переопределить каждый стиль, видимый в <fieldset> в Firebugs CSS Inspector и в таблице стилей по умолчанию Firefox forms.css, но это не помогло. В частности, переопределение min-width и width тоже ничего не делало.

Код

HTML набора полей:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

Мой CSS, который должен работать, но isnt:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

Сброс свойств width к значения по умолчанию ничего не делает:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

Далее CSS, в котором я попытается устранить проблему:

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

Подробнее

Проблема также возникает в этом более подробном, более сложном примере jsFiddle, который больше похож на веб-страницу Im, фактически пытающуюся исправить. Вы можете видеть из этого, что <select> не проблема - встроенный блок div также не может изменять размер. Хотя этот пример более сложный, я предполагаю, что исправление для простого вышеизложенного случая также устранит этот более сложный случай.

[Изменить: см. ниже сведения о поддержке браузера.]

Любознательная вещь об этой проблеме заключается в том, что если вы установили div.wrapper { width: 50%; }, <fieldset> перестает изменять размер в точке, тогда полная -size <select> ударил бы край окна просмотра. Изменение размера происходит так, как будто <select> имеет width: 100%, хотя <select> выглядит как width: 50%.

Если предоставить <select> сам width: 50%, это поведение не происходит; ширина просто устанавливается правильно.

Я не понимаю причину этой разницы. Но это может быть не актуально.

Я также нашел очень похожий вопрос HTML-поле позволяет детям неограниченно расширяться. Ответчик не смог найти решение и догадывается, что нет решения, кроме удаления <fieldset>. Но Im интересно, если действительно невозможно сделать отображение <fieldset> правильным, почему? Что в <fieldset> s spec или CSS по умолчанию вызывает такое поведение? Это особое поведение, вероятно, где-то задокументировано, так как работают несколько браузеров.

Основная цель и требования

Причина, по которой я пытаюсь сделать это, - это часть написания мобильных стилей для существующей страницы с большой формой. Форма имеет несколько разделов, и одна ее часть завернута в <fieldset>. На смартфоне (или, если вы сделаете окно браузера маленьким), часть страницы с <fieldset> намного шире, чем остальная часть формы. Большая часть формы ограничивает его ширину просто тонкой, но раздел с <fieldset> не делает этого, заставляя пользователя уменьшать масштаб или прокручивать вправо, чтобы увидеть весь этот раздел.

Не забудьте просто удалить <fieldset>, поскольку он создан на многих страницах большого приложения, и я не уверен, что на нем могут зависеть селекторы в CSS или JavaScript.

Я могу использовать JavaScript, если мне нужно, и решение для JavaScript лучше, чем ничего. Но если JavaScript - единственный способ сделать это, Id будет любопытно услышать объяснение, почему это невозможно, используя только CSS и HTML.

Изменить: поддержка браузера

На сайте мне нужно поддерживать Internet Explorer 8 и более поздние версии (мы просто отказались от поддержки IE7), последнего Firefox и новейшего Chrome. Эта страница также должна работать на смартфонах iOS и Android. Некоторое ухудшение, но все еще пригодное для использования поведение приемлемо для Internet Explorer 8.

Я протестировал мой сломанный fieldset пример в разных браузерах. Он фактически работает в этих браузерах:

• Internet Explorer 8, 9 и 10
• Chrome
• Chrome для Android

Он разбивается в этих браузерах:

• Firefox
• Firefox для Android
• Internet Explorer 7

Таким образом, единственным браузером, который меня волнует, что текущий код работает, - Firefox (как на рабочем столе, так и на мобильном устройстве). Если код был исправлен, поэтому он работал в Firefox, не нарушая его в каких-либо других браузерах, это решило бы мою проблему.

Шаблон HTML-сайта использует условные комментарии Internet Explorer для добавления классов .ie8 и .oldie к элементу <html>. Вы можете использовать эти классы в своем CSS, если вам нужно обойти различия стилей в IE. Добавленные классы такие же, как в эта старая версия HTML5 Boilerplate.

Ответы

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

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