проблема
У меня есть, <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 .
<fieldset>(или div.wrapper) всю необходимую ширину и select { width:100% }. max-widthкажется, дает элементу некоторый% от первоначальной ширины его родителя , затем не масштабируется, тогда widthкак масштабируется с его родителем. Я думаю, что будет делать то, что вы хотите (но я мог бы неправильно понял). В более сложной скрипте попробуйте задать для полей в левом столбце ширину в% и ширину в мин. Затем задайте поля справа 100 - (left-fields -% - width)% width.