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

до изменения размера:

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

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

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

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

The <fieldset> действует так, как будто есть правило CSS fieldset { min-width: min-content; }. (min-content означает, грубо говоря, наименьшую ширину, которая не вызывает переполнения ребенка.) Если я заменю <fieldset> С <div> С min-width: min-content, он выглядит точно так же. Но нет никакого правила с min-content в моем стили, в таблице стилей браузера по умолчанию или видимые в Инспекторе CSS Firebug. Я попытался переопределить каждый стиль, видимый на <fieldset> в Инспекторе CSS Firebug и в таблице стилей Firefox по умолчанию "формы".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> is не проблема-встроенный блок div и не изменять. Хотя этот пример более сложный, я предполагаю, что исправление для простого случая выше также исправит этот более сложный случай.

[Edit: см. сведения о поддержке браузера ниже.]

одна любопытная вещь об этой проблеме является то, что если вы устанавливаете div.wrapper { width: 50%; } на <fieldset> останавливает изменение размера себя в точке, то полноразмерный <select> ударился бы о край видового экрана. Изменение размера происходит так, как будто <select> и width: 100%, хотя <select> кажется width: 50%.

если вы дать width: 50%, что не происходит; ширина просто правильно установить.

я не понимаю причину этой разницы. Но это может быть не актуально.

я также нашел очень похожий вопрос HTML fieldset позволяет детям расширяться бесконечно. Этот Аскер не мог найти решение и догадывается, что нет никакого решения, кроме удаления <fieldset>. Но мне интересно, если это действительно невозможно сделать <fieldset> отобразить справа, почему? Что в <fieldset> ' s spec или 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
• Chrome для Android

он ломается в этих браузерах:

• Firefox
• Firefox для Android
• Internet Explorer 7

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

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