Проблема
У мене є те, <select>де одне його <option>текстове значення дуже довге. Я хочу, <select>щоб розмір змінився, щоб він ніколи не був ширшим за його батьківський, навіть якщо він повинен вирізати відображений текст. max-width: 100%повинен це зробити.
Перед зміною розміру:
Що я хочу після зміни розміру:
Але якщо ви завантажите цей приклад jsFiddle і зміните ширину панелі Result, щоб бути меншою, ніж ширину <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 Inspector Firebug. Я намагався змінити кожен стиль, помітний <fieldset>у CSS Inspector Firebug та у стилі таблиць стилів Firefox form.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
Це перерви в цих браузерах:
- Firefox
- 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 - (ліві поля -% - ширина)% ширини.