проблема

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

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

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

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

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

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

Эти <fieldset>действия, как если есть правило CSS fieldset { 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>«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 Fox
• Firefox для Android
• Internet Explorer 7

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

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

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

Ошибка Firefox , описанная ниже, исправлена в Firefox 53 и ссылка на этот ответ, наконец , была удалена из документации Bootstrap в .

Кроме того, мои искренние извинения авторам Mozilla, которым пришлось заблокировать удаление поддержки -moz-documentчастично из-за этого ответа.

Исправление

В WebKit и Firefox 53+ вы просто устанавливаете min-width: 0;на fieldset переопределение значения по min-contentумолчанию.

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

• table-cell (рекомендуемые)
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

Из них я рекомендуюtable-cell . И то, table-rowи другое table-row-groupне позволит вам изменить ширину, а также table-columnи table-column-groupпомешает вам изменить высоту.

Это (несколько разумно) нарушит рендеринг в IE. Поскольку это нужно только Gecko, вы можете по праву использовать @-moz-documentодно из собственных CSS-расширений Mozilla, чтобы скрыть его от других браузеров:

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

(Вот демоверсия jsFiddle .)

Это все исправляет, но если вы похожи на меня, ваша реакция была примерно такой ...

Какой.

Там является причиной, но это не красиво.

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

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

Однако внутренние элементы таблицы составляют особый тип фрейма в Gecko. Размерные ограничения для элементов с этим displayнабором значений рассчитываются по отдельному пути кода , полностью обходя принудительную минимальную ширину, наложенную на наборы полей.

Опять же - ошибка для этого была исправлена ​​в Firefox 53, поэтому вам не нужен этот взлом, если вы нацелены только на более новые версии.

Использование @-moz-documentбезопасно?

Для этой проблемы, да. @-moz-documentработает как и предполагалось во всех версиях Firefox до 53, где эта ошибка исправлена.

Это не случайно. Отчасти благодаря этому ответу ошибка, ограничивающая @-moz-documentтаблицы стилей пользователя / UA, была сделана зависимой от основной ошибки набора полей, которая была исправлена ​​первой.

Кроме того, не используйте @-moz-documentдля таргетинга Firefox в своем CSS , несмотря на другие ресурсы.

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

² Все ссылки на источник Gecko в этом ответе относятся к ревизии 5065fdc12408 , совершенной 29 июля 2013 г .; Вы можете сравнить заметки с самой последней редакцией Mozilla Central .

³ См., Например, SO # 953491: нацеливание только на Firefox с помощью CSS и трюков CSS: CSS взламывает нацеливание на Firefox для популярных ссылок на высококлассные сайты.

Safari на iOS проблема с выбранным ответом

Я нашел ответ от Джордана Грея особенно полезным. Однако, похоже, это не решило эту проблему на Safari iOS для меня.

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

Исправить проблему

Простая установка для fieldset ширины контейнера в 100%, кажется, обходит эту проблему.

пример

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

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

JSFiddle | Codepen

Я боролся с этим много часов, и в основном браузер применяет компьютерные стили, которые нужно переопределить в своем CSS. Я забыл точное свойство, которое устанавливается для fieldsetэлементов по сравнению divс s (возможно min-width?).

Мой лучший совет - изменить ваш элемент на a div, скопировать вычисленные стили из инспектора, а затем снова изменить свой элемент на fieldsetи сравнить вычисленные стили, чтобы найти виновника.

Надеюсь, это поможет.

Обновление: добавление display: table-cellсправки в браузерах без Chrome.

.fake-select { white-space:nowrap; }заставил fieldset интерпретировать .fake-selectэлемент по его первоначальной ширине, а не по вынужденной ширине (даже если переполнение скрыто).

Удалить это правило, и изменить .fake-select«S , max-width:100%чтобы просто width:100%и все подходит. Предостережение заключается в том, что вы видите все содержимое фальшивого выбора, но я не думаю, что это все так плохо, и теперь оно подходит горизонтально.

Обновление: с текущими правилами в следующей скрипте (которая содержит только реальные выборки), дочерние элементы набора полей ограничены правильной шириной. Кроме удаления правил .fake-selectи исправления комментариев (от // commentк /* comment */, я отметил изменения в CSS скрипты.

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

доказательство