проблема

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

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

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

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

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

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

<fieldset> действует так, как будто есть правило CSSfieldset { min-width: min-content; }, (min-content примерно означает наименьшую ширину, которая не приводит к переполнению дочернего элемента.) Если я заменю<fieldset> с<div> с участиемmin-width: min-contentЭто выглядит точно так же. Тем не менее, нет никакого правила сmin-content в моих стилях, в таблице стилей браузера по умолчанию, или отображается в CSS-инспекторе Firebug. Я пытался переопределить каждый стиль, видимый на<fieldset> в инспекторе CSS Firebug и в таблице стилей 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, который должен работать, но не:

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, которая больше похожа на веб-страницу, которую я на самом деле пытаюсь исправить. Из этого видно, что<select> это не проблема - встроенный блокdiv также не удается изменить размер. Хотя этот пример более сложный, я предполагаю, что исправление для простого случая выше также исправит этот более сложный случай.

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

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

если тыдай<select> самwidth: 50%такое поведение не происходит; ширина просто правильно установлена.

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

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

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

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

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

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

Редактировать: поддержка браузера

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

Я перепроверилмой сломанныйfieldset пример в разных браузерах. На самом деле это уже работает в этих браузерах:

Internet Explorer 8, 9 и 10ХромChrome для Android

Это ломается в этих браузерах:

Fire FoxFirefox для AndroidInternet Explorer 7

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

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