Проблема #
У меня в <выбрать>
если в <параметр>
с текстовыми значениями можно продолжать очень долго. Я хочу в <выбрать>
чтобы изменить размер, поэтому он никогда не шире, чем его родитель, даже если он должен отрезать его отображается текст. Макс-ширина: 100%
должны сделать это.
Прежде чем изменить размер:
Чего я хочу после изменения размера:
А если вы [загрузить этот jsFiddle пример]() и изменить результат группы ширина должна быть меньше, чем в <выбрать>
, можно увидеть, что выбрать внутри в <полей>
невозможно масштабировать его ширину вниз.
Что я вижу после изменения размера:
Тем не менее, [эквивалент страницу в <див>
вместо <полей>
](http://jsfiddle.net/roryokane/2YBcn/) не корректно. Вы можете увидеть, что и [проверьте свои изменения более легко](http://jsfiddle.net/roryokane/hcTZG/) если у вас [в <полей>
и <див>
рядом друг с другом на одной странице](http://jsfiddle.net/roryokane/hcTZG/). И если вы удалите окружающий в <полей> теги](http://jsfiddle.net/roryokane/D2U5R/), изменение размера работы. В
<блок настройки и GT; тегпочему-то вызывает горизонтальное масштабирование сломать. На в
<полей>действует как бы есть правило CSS
набор полей { мин-ширина: мин-содержание; }. ([
мин-содержание](https://developer.mozilla.org/en-US/docs/Web/CSS/width) означает, грубо говоря, наименьшую ширину, что не вызывает у ребенка к переполнению.) Если я заменить
<полей>С [в
<див>С
мин-ширина: мин-содержание](http://jsfiddle.net/roryokane/2YBcn/), это выглядит точно так же. Еще нет правила с
Мин-контентв моем стили, в браузере стилей по умолчанию, или видны в Инспекторе CSS в Firebug в. Я пытался переопределить все стили видны на в
<полей> в Инспекторе CSS в Firebug В и в таблице стилей по умолчанию в Firefox форм.в CSS, но это не помогло. Конкретно переопределение мин-ширина
и ширина
тоже ничего не делала.
Код #
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%;
}
Сброс ширина
свойства по умолчанию ничего не делает:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
Далее в CSS, в котором я пытаюсь и не решить проблему](http://jsfiddle.net/roryokane/bfmsz/):
/* 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 пример](http://jsfiddle.net/roryokane/XDFuW/), который больше похож на веб-страницу, на самом деле я пытаюсь исправить. Вы можете видеть из того, что в <выбрать>
это не проблема – инлайн-блок див
не изменить. Хотя этот пример является более сложным, я предполагаю, что исправить для простого случая, также будет исправить это более сложный случай.
[Редактировать: см. сведения о поддержке браузера ниже.]
Одна любопытная вещь о этой проблемы заключается в том, что [если вы установите див.фантик { ширина: 50%; }
](http://jsfiddle.net/roryokane/hfa69/), то в <полей>
изменение размера останавливается именно в тот момент, то полная-размер в <выбрать>
были бы на краю области просмотра. Изменение происходит так, как будто в <выбрать>
установлено значение width: 100%
, хотя в <выбрать>
похоже, что ширина: 50%
.
Если вам дать в <выбрать>
сам ширина: 50%
](http://jsfiddle.net/roryokane/q3WMF/), что не происходит; ширина просто правильно установить.
Я не понимаю, почему такая разница. Но это не может быть актуальным.
Я также нашел очень похожий вопрос https://stackoverflow.com/q/1716183/578288. Автор вопроса не смог найти решение и угадает, что нет решения помимо удаления <полей>
. Но мне интересно, если это действительно невозможно сделать в <полей>
дисплей, правда, почему это? Что в <полей>
с спец или по умолчанию CSS (а этого вопроса) причины такого поведения? Это особое поведение, вероятно, будет где-то задокументировано, с несколькими браузерами работать.
<полей>
. На смартфон (или если вы делаете окно браузера, маленький), часть страницы с <полей>
гораздо шире, чем остальные формы. Большинство форма сковывает его ширине просто отлично, но раздел С в <полей>
не заставляя пользователей, чтобы уменьшить масштаб или прокрутите вправо, чтобы увидеть все этого раздела.
Я опасаюсь просто удалив в <полей>
, поскольку она создается на многих страницах большое приложение, и я не уверен, что селекторы в CSS или JavaScript может зависеть от этого.
Я могу использовать JavaScript, если мне нужно, и решение JavaScript-это лучше, чем ничего. Но если JavaScript-это единственный способ сделать это, мне было бы интересно услышать объяснение, почему это не возможно, используя только CSS и HTML. На сайте, мне нужна для поддержки интернет Explorer 8 и позже (мы просто за поддержку IE7), последний Firefox и Гугл Хром. Данная страница также будет работать на iOS и Android-смартфонов. Немного деградировал, но все еще можно использовать поведение является приемлемым для Интернет Эксплорер 8.
Я перепроверила [пример моей сломанной полей
] (
.ИЕ8
и .Олди
в в <html-код>
элемент. Вы можете использовать эти классы в CSS, если вам нужно обойти укладки различия в IE. Добавлены классы такие же, как и в это старая версия в HTML5 Boilerplate. К великому моему облегчению, в [в Firefox ошибка][ошибка] описанное ниже является фиксированной, как в Firefox 53 и ссылку на этот ответ, наконец, был [удален из загрузки's документация][загрузки-удалить].
В WebKit и Firefox 53+, вы просто установите мин-ширина: 0; На полей, чтобы переопределить значение по умолчанию
мин-контента.¹
Все-таки Firefox-это немного... странно, когда дело доходит до fieldsets. Чтобы сделать эту работу в более ранние версии, необходимо изменить свойство display
из полей в одно из следующих значений:
Из них я рекомендую таблица-ячейки`. Как строка таблицы " и "таблица-строки-группы`, чтобы изменить ширину, а в таблице-столбец" и " таблица-столбец-группы, чтобы изменить высоту.
Это (отчасти обоснованно) перерыв рендеринга в IE. Так как только геккон нуждается в этом, вы можете вполне обоснованно использовать [@-МОЗ-документ
][МОЗ-документ]—один из [Мозилла'с фирменной УСБ расширения][Мозилла-ус]—скрывать это от других браузерах:
@-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
(Здесь'ы [jsFiddle демо][jsfiddle].)
Все исправить, но если вы'вновь что-нибудь вроде меня ваша реакция была что-то вроде...
Есть такое причины, но это's не достаточно.
Презентации по умолчанию элемент полей абсурдна и практически невозможно указать в CSS. Подумайте об этом: полей'ы граница исчезает, где он'ы перекрывается элемент легенды, но фон остается видимым! Там's никакой способ воспроизвести это с любой другой комбинацией элементов.
В довершение всего, реализаций полно уступки устаревших поведения. Одним из таких является то, что минимальная ширина полей не меньше, чем внутренняя ширина его содержания. В WebKit дает вам способ, чтобы переопределить это поведение путем указания его в таблице стилей по умолчанию, но Гекко² идет на шаг дальше и [применяет его в движок][полей-источник].
Однако, внутренние элементы таблицы представляют собой [специальный каркас тип][внутренний-таблицы-источника] в Гекко. Размерные ограничения для элементов с заданными значениями этих "дисплей", расположенном в [отдельный код путь][таблица-ширина-источник], полностью избежать насильственных минимальная ширина наложенных на fieldsets.
Опять же—[для этого ошибка][ошибка] исправлена начиная с Firefox 53, так что вам не нужен этот хак, Если вы не только на новые версии.
@-МОЗ-документ
безопасный?На этот вопрос, да. @-МОЗ-документ
работает как положено во всех версиях Firefox до 53, Где эта ошибка исправлена.
И это не случайно. Отчасти этот ответ, ошибки на [пределе `@-МОЗ-документ для пользователя/УА стили][МОЗ-документ-ошибка] было поставлено в зависимость от базовых полей исправления ошибки в первую очередь.
Помимо этого, я не рекомендую использовать `@-МОЗ-документ на исключительно целевой Firefox в ваш CSS, другие ресурсы несмотря на.³
¹ значение может иметь префикс. По словам одного читателя, это не имеет никакого эффекта в стокового браузера Android 4.1.2 и, возможно, другие старые версии; у меня не было времени, чтобы проверить это.
² все ссылки на геккона источник в ответе на этот вопрос ссылаются на [5065fdc12408 правок][изменений], совершил 29ᵗʰ июля 2013; вы, возможно, пожелает сверить с [последняя редакция от Mozilla Центральный][Гекко-последний].
³ см., например, [так #953491: таргетинг только Firefox с помощью CSS][так-для Firefox-для CSS] и [УСБ хитрости: в CSS хаки таргетинга для Firefox][модели CSS-уловок, которые] на основе многих статей на громких сайтах.
в
[загрузки-удален]: протокол HTTPS://github.com/twbs/bootstrap/pull/21262
[МОЗ-документ-ошибка]: протокол HTTPS://bugzilla.mozilla.org/show_bug.cgi?id=1035091#c75
[jsfiddle]: на
[Мозилла-Усс]: протокол HTTPS://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
[МОЗ-документ]: протокол HTTPS://developer.mozilla.org/en-US/docs/Web/CSS/@document
[плоским, что]: на HTTP://tvtropes.org/pmwiki/pmwiki.php/Main/FlatWhat
[полей-источник]: на HTTP://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/forms/nsFieldSetFrame.cpp#l400
[внутренняя таблица-источник]: на HTTP://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/generic/nsHTMLReflowState.h#l71
[таблица-ширина-источник]: на HTTP://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/generic/nsHTMLReflowState.cpp#l1965
[ошибка]: протокол HTTPS://bugzilla.mozilla.org/show_bug.cgi?id=504622#c5
[изменений]: на HTTP://hg.mozilla.org/mozilla-central/file/5065fdc12408/
[Гекко-последний]: на HTTP://mxr.mozilla.org/mozilla-central/source/
[так-для Firefox-Усс]: протокол HTTPS://stackoverflow.com/a/953491/230390
[модели CSS-трюки]: на HTTP://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
Safari на iOS выпуск с выбранным вариантом ответа
Я нашел ответ из Иордании серый, чтобы быть особенно полезным. Однако это не'т, кажется, чтобы решить эту проблему на сафари iOS для меня.
Вопрос для меня заключается в том, что полей не может иметь ширину авто, если элемент имеет максимальную ширину в % ширины.
Исправление для проблемы
Просто настройка полей, чтобы иметь 100% ширина it'контейнер с кажется, чтобы получить вокруг этого вопроса.
Пример
fieldset {
min-width: 0;
width: 100%;
}
Пожалуйста, обратитесь к ниже рабочие примеры - если убрать % ширина от полей или заменить его с авто, он не будет продолжать функционировать.
[JSFiddle][1] | Сайт CodePen
Я боролся в течение многих часов с этим, и в принципе, браузер применяет вычисленный стиль, который необходимо переопределить в ваш CSS. Я не помню точное свойство, которое устанавливается на полей
элементов и див (возможно
мин-ширина`?).
Мой лучший совет будет менять свой элемент див
, копию вычисляемые стили от вашего инспектора, а затем изменить свой элемент с полей
и сравнить вычисленные стили, чтобы найти виновника.
Надеюсь, что помогает.
Обновление: добавление отображения: таблица-ячейки помогает в не Chrome браузеры.
.фейк-выберите { белый-пространство:без переноса; }
вызвало полей для интерпретации `.фейк-выберите элемент его первоначальной ширины, а не его принудительная ширины (даже если переполнение скрытый).
Удалить это правило, и изменение .фейк-выберите
'ы Макс-ширина:100%
просто `ширина:100% и все подходит. Нюанс заключается в том, что вы видите все содержимое фейк-Select, но я не'т думаю, что это все так плохо, и он подходит по горизонтали сейчас.
Обновление: с текущими правилами в следующих скрипку (которая содержит единственный реальный выбор), с полей'дети с ограничен для коррекции ширины. Помимо удаления правила .фейк-выбор и фиксация замечаний (от
// комментарийк
/ комментарий /, Я'вэ отметил, что изменения в скрипке'ов в CSS.
Я понимаю вашу проблему сейчас лучше, и на скрипке отражает определенный прогресс. Я набор правил по умолчанию для всех в <выбрать>
S, и резерв .xxlarge для тех, которые вы знаете, будет шире, чем 480px (и это работает только потому, что вы *знаете *** ширина
#просмотра, а можете вручную добавить класс для тех, кто слишком широкий. Просто требует немного тестирования)
[Доказательства](
)