Problem

Ich habe ein<select> wo einer seiner<option>Die Textwerte von sind sehr lang. Ich will das<select> Um die Größe zu ändern, ist es nie breiter als das übergeordnete Element, auch wenn der angezeigte Text abgeschnitten werden muss.max-width: 100% sollte das tun.

Vor der Größenänderung:

Was ich nach der Größenänderung möchte:

Aber wenn duLaden Sie dieses jsFiddle-Beispiel und passen Sie die Breite des Ergebnisfensters so an, dass sie kleiner ist als die des<select>können Sie sehen, dass die Auswahl innerhalb der<fieldset> kann die Breite nicht verkleinern.

Was ich nach der Größenänderung tatsächlich sehe:

Dieäquivalente Seite mit a<div> anstelle einer<fieldset> skaliert richtig. Sie können das und sehenTesten Sie Ihre Änderungen einfacher Wenn Sie habena <fieldset> und ein<div> nebeneinander auf einer Seite. Und wenn DuLöschen Sie die Umgebung<fieldset> Stichwortefunktioniert die Größenänderung. Das<fieldset> Das Tag bewirkt, dass die horizontale Größenänderung unterbrochen wird.

Das<fieldset> verhält sich so, als gäbe es eine CSS-Regelfieldset { min-width: min-content; }. (min-content bedeutet ungefähr die kleinste Breite, bei der ein Kind nicht überläuft<fieldset> mit einer<div> mitmin-width: min-contentsieht es genauso aus. Dennoch gibt es keine Regel mitmin-content in meinen Stilen, im Standard-Stylesheet des Browsers oder im CSS-Inspektor von Firebug sichtbar. Ich habe versucht, jeden sichtbaren Stil auf der Seite zu überschreiben<fieldset> im CSS-Inspektor von Firebug und im Standard-Stylesheet von Firefoxforms.css, aber das hat nicht geholfen. Insbesondere überschreibenmin-width undwidth habe auch nichts getan.

Code

HTML des Feldsatzes:

<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>

Mein CSS, das funktionieren sollte, aber nicht:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

Zurücksetzen derwidth Eigenschaften zudie Standardeinstellungen tut nichts:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

Weitere CSS in denen ichVersuchen Sie, das Problem zu beheben:

/* 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;
}

Mehr Details

Das Problem tritt auch hier aufumfassenderes, komplizierteres jsFiddle-Beispiel, die der Webseite ähnlicher ist, die ich gerade zu reparieren versuche. Daran können Sie erkennen, dass die<select> ist nicht das problem - ein inline-blockdiv kann auch die Größe nicht ändern. Obwohl dieses Beispiel komplizierter ist, gehe ich davon aus, dass die Korrektur für den oben genannten einfachen Fall auch diesen komplizierteren Fall korrigiert.

[Bearbeiten: siehe Details zur Browserunterstützung weiter unten.]

Eine merkwürdige Sache an diesem Problem ist die folgendewenn du setztdiv.wrapper { width: 50%; }, das<fieldset> stoppt die Größenänderung an dem Punkt, an dem sie die volle Größe hat<select> hätte den Rand des Ansichtsfensters getroffen. Die Größenänderung geschieht so, als ob die<select> hatwidth: 100%, obwohl die<select> sieht aus wie es hatwidth: 50%.

Wenn duGib die<select> selbstwidth: 50%tritt dieses Verhalten nicht auf; die breite wird einfach richtig eingestellt.

Ich verstehe den Grund für diesen Unterschied nicht. Aber es kann nicht relevant sein.

Ich fand auch die sehr ähnliche FrageMit dem HTML-Feldsatz können Kinder auf unbestimmte Zeit erweitert werden. Der Fragesteller konnte keine Lösung finden undVermutungen, dass es keine Lösung gibt abgesehen von der Entfernung der<fieldset>. Aber ich frage mich, ob es wirklich unmöglich ist, das zu schaffen<fieldset> Anzeige rechts, warum ist das so? Was in<fieldset>Istspez oderStandard-CSS (wie von dieser Frage) verursacht dieses Verhalten? Dieses spezielle Verhalten ist wahrscheinlich irgendwo zu dokumentieren, da mehrere Browser so arbeiten.

Hintergrundziel und Anforderungen

Der Grund, warum ich dies versuche, besteht darin, mobile Stile für eine vorhandene Seite mit einem großen Formular zu schreiben. Das Formular besteht aus mehreren Abschnitten, und ein Teil davon ist in a eingeschlossen<fieldset>. Auf einem Smartphone (oder wenn Sie Ihr Browserfenster klein machen) wird der Teil der Seite mit dem Symbol<fieldset> ist viel breiter als der Rest der Form. Der größte Teil des Formulars beschränkt seine Breite in Ordnung, aber der Abschnitt mit dem<fieldset> Dies ist jedoch nicht der Fall, da der Benutzer gezwungen ist, die Ansicht zu verkleinern oder nach rechts zu scrollen, um den gesamten Abschnitt anzuzeigen.

Ich bin vorsichtig, wenn ich einfach das entferne<fieldset>, da es auf vielen Seiten in einer großen App generiert wird und ich nicht sicher bin, welche Selektoren in CSS oder JavaScript davon abhängen könnten.

Ich kann JavaScript verwenden, wenn ich muss, und eine JavaScript-Lösung ist besser als nichts. Wenn dies jedoch nur mit JavaScript möglich ist, bin ich gespannt auf eine Erklärung, warum dies nicht nur mit CSS und HTML möglich ist.

Bearbeiten: Browser-Unterstützung

Auf der Website muss ich Internet Explorer 8 und höher (wir haben die Unterstützung für IE7 eingestellt), den neuesten Firefox und das neueste Chrome unterstützen. Diese Seite sollte auch auf iOS- und Android-Smartphones funktionieren. Leicht herabgesetztes, aber noch verwendbares Verhalten ist für Internet Explorer 8 akzeptabel.

Ich habe erneut getestetMein gebrochenfieldset Beispiel in verschiedenen Browsern. Es funktioniert tatsächlich bereits in diesen Browsern:

Internet Explorer 8, 9 und 10ChromChrome für Android

Es bricht in diesen Browsern:

FeuerfuchsFirefox für AndroidInternet Explorer 7

Daher ist der einzige Browser, der mich interessiert, dass der aktuelle Code einbricht, Firefox (sowohl auf dem Desktop als auch auf dem Handy). Wenn der Code so repariert würde, dass er in Firefox funktioniert, ohne ihn in anderen Browsern zu beschädigen, würde das mein Problem lösen.

Die Site-HTML-Vorlage verwendet Internet Explorer-bedingte Kommentare, um Klassen hinzuzufügen, z.ie8 und.oldie zum<html> Element. Sie können diese Klassen in Ihrem CSS verwenden, wenn Sie Stilunterschiede im IE umgehen müssen. Die hinzugefügten Klassen sind die gleichen wie indiese alte Version von HTML5 Boilerplate.