Проблема
У меня есть <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.