Am un <selectați>
în cazul în care unul dintre ei de <opțiune>
s valorile de text este foarte lung. Vreau <selectați>
pentru a redimensiona astfel încât nu este niciodată mai mare decât părintele său, chiar dacă trebuie să tăiați textul afișat. max-width: 100%
ar trebui să fac asta.
Înainte de a redimensiona:
Ceea ce vreau după redimensionare:
Dar dacă tu [a încărca acest jsFiddle exemplu]() și redimensiona panoul de Rezultat lățimea să fie mai mică decât cea de <selectați>
,, puteți vedea că selectați în interiorul <fieldset>
nu reușește să-scară lățime în jos.
Ceea ce eu văd, de fapt după redimensionare:
Cu toate acestea, [echivalent pagină cu un <div>
în loc de <fieldset>
](http://jsfiddle.net/roryokane/2YBcn/) nu scară în mod corespunzător. Puteți vedea că și [testați-vă schimbă mai ușor](http://jsfiddle.net/roryokane/hcTZG/), dacă aveți [un <fieldset> " și " <div>
unul lângă altul pe o singură pagină](http://jsfiddle.net/roryokane/hcTZG/). Și dacă te [șterge din jur <fieldset> tag-uri](http://jsfiddle.net/roryokane/D2U5R/), redimensionarea funcționează. De
Spre marea mea ușurare, [Firefox bug][bug] este descris mai jos este fixat de Firefox 53 și link-ul de la acest răspuns a fost, în sfârșit, [eliminat de la Bootstrap's documentatiei][bootstrap-eliminat].
În WebKit și Firefox 53+, ai pus min-width: 0;
pe fieldset pentru a suprascrie valoarea implicită a min-conținut
.¹
Totuși, Firefox este un pic ciudat atunci când vine vorba de fieldsets. Pentru a face acest lucru în versiunile anterioare, trebuie să modificați "display" proprietate a fieldset la una dintre următoarele valori:
Dintre acestea, recomand table-cell
. Ambele tabel-rândul " și "tabel-rândul-grup vă împiedică de la schimbarea lățime, în timp ce
tabel-coloana" și " tabel-coloana-grup vă împiedică de la schimbarea înălțime.
Acest lucru va (oarecum rezonabil) pauză de redare în IE. Deoarece numai Gecko are nevoie de acest lucru, puteți justificat utilizarea [@-moz-document
][moz-document]—unul din [Opera's de proprietate CSS extensiile][mozilla-css]—pentru a ascunde de la alte browsere:
@-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
(Aici's a [jsFiddle demo][jsfiddle].)
Care rezolvă lucrurile, dar daca're ca mine, reactia ta a fost ceva de genul...
Nu este un motiv, dar nu's nu destul.
Implicit prezentarea fieldset element este absurd și, în esență, imposibil de a specifica în CSS. Gândiți-vă: fieldset's chenar dispare unde-o's suprapus de o legendă element, dar fondul rămâne vizibil! Nu's nici o modalitate de a reproduce acest lucru cu orice altă combinație de elemente.
Să-l top off, implementari sunt pline de concesii pentru moștenirea comportament. Una din ele este că lățimea minimă de un fieldset nu este niciodată mai puțin decât intrinsecă lățime de conținutul său. WebKit vă oferă o modalitate de a trece peste acest comportament prin specificarea în stil implicită, dar Gecko² merge un pas mai departe și [impune în rendering engine][fieldset-sursă].
Cu toate acestea, interne masă de elemente constituie un [cadru special de tip][intern-tabelul-sursa] în Gecko. Constrângerile dimensionale pentru elemente cu aceste "display" valorile stabilite sunt calculate în [cod separat cale][tabel-lățimea-sursă], în întregime eluda aplicate lățime minimă impusă fieldsets.
Din nou—[bug pentru acest][bug] a fost reparat cât de Firefox 53, astfel încât nu aveți nevoie de acest hack, dacă vizați doar versiunile mai noi.
Pentru problema asta, da. `@-moz-document funcționează așa cum este prevăzut în toate versiunile de Firefox până la 53, în cazul în care acest bug este fix.
Acesta nu este un accident. Datorită, în parte la acest răspuns, bug-ul la [limit `@-moz-document pentru utilizator/UA foi de stil][moz-document-bug] a fost dependentă de fond al sistemului fieldset bug-ul fiind fixat în primul rând.
Dincolo de asta, eu nu mai recomanda folosirea `@-moz-document care să vizeze exclusiv Firefox în CSS, alte resurse fără a aduce atingere.³
¹ Valoare poate fi prefixat. Potrivit unui cititor, acest lucru nu are niciun efect în Android 4.1.2 Stock Browser-ul și, eventual, alte versiuni vechi; nu am avut timp pentru a verifica acest lucru.
² Toate link-urile la Gecko sursă în acest răspuns se referă la [5065fdc12408 changeset][changeset], angajat 29ᵗʰ iulie 2013; ați putea dori pentru a compara notele cu [cea mai recentă revizuire de la Mozilla Centrale][gecko-cele mai noi].
³ a se Vedea de exemplu [DECI #953491: Vizează doar pe Firefox cu CSS][așa-firefox-css] și [CSS Trucuri: CSS hacks vizează Firefox][css-trucuri] pentru a face referire pe larg articolele de pe mare-site-uri de profil.
[bootstrap-eliminat]: https://github.com/twbs/bootstrap/pull/21262
[moz-document-bug]: https://bugzilla.mozilla.org/show_bug.cgi?id=1035091#c75
[jsfiddle]:
[mozilla-css]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
[moz-document]: https://developer.mozilla.org/en-US/docs/Web/CSS/@document
[plat-ce -]: http://tvtropes.org/pmwiki/pmwiki.php/Main/FlatWhat
[fieldset-sursa]: http://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/forms/nsFieldSetFrame.cpp#l400
[intern-tabelul-sursa]: http://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/generic/nsHTMLReflowState.h#l71
[tabel-lățimea-sursa]: http://hg.mozilla.org/mozilla-central/file/5065fdc12408/layout/generic/nsHTMLReflowState.cpp#l1965
[bug]: https://bugzilla.mozilla.org/show_bug.cgi?id=504622#c5
[changeset]: http://hg.mozilla.org/mozilla-central/file/5065fdc12408/
[gecko-ultimele]: http://mxr.mozilla.org/mozilla-central/source/
[așa-firefox-css]: https://stackoverflow.com/a/953491/230390
[css-trucuri]: http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
Safari pe iOS problemă cu răspunsul selectat
Am găsit răspunsul la Jordan Gri a fi deosebit de utile. Cu toate acestea nu't par să rezolve această problemă pe Safari iOS pentru mine.
Problema pentru mine este pur și simplu că fieldset nu poate avea un auto lățime dacă elementul în termen are un max-lățime ca un % lățime.
Fix pentru o problemă
Pur și simplu setarea fieldset să aibă o lățime de 100% de l's container se pare că pentru a obține în jurul valorii de această problemă.
Exemplu
fieldset {
min-width: 0;
width: 100%;
}
Vă rugăm să consultați de mai jos pentru exemple de lucru - dacă scoateți % lățime pe fieldset sau să o înlocuiască cu auto, acesta nu va continua să funcționeze.
[JSFiddle][1] | Codepen
M-am luptat timp de mai multe ore cu acest lucru, și, practic, browser-ul este aplicarea calculat de styling de care aveți nevoie pentru a trece peste în CSS. Am uitat exact proprietatea pe care este setat pe fieldset
elemente versus `div (probabil "min-lățime"?).
Sfatul meu ar fi să-ți schimbi element la o div
, copiați calculat stiluri de inspector, apoi schimba elementul înapoi la `fieldset și comparați calculat stiluri pentru a găsi vinovatul.
Sper că vă ajută.
Actualizare: Adăugarea display: table-cell
ajută la non-Chrome browsere.
.fals-selectați { white-space:nowrap; }
a cauzat fieldset de a interpreta .fals-selectați
element de lățimea originală, mai degrabă decât forțat lățime (chiar și atunci când surplusul este ascuns).
A elimina această regulă, și de a schimba .fals-selectați
's max-width:100%
doar width:100%
și totul se potrivește. Avertismentul este că veți vedea toate conținutul fals-selectați, dar nu't cred că acest lucru este tot așa de rău, și se potrivește orizontal acum.
Actualizare: cu normele actuale în următoarele vioara (care conține doar real selectează), la fieldset's copiii sunt constrânși să corecteze lățimi. Altele decât eliminarea reguli pentru .fals-selectați și fixarea comentarii (de la
// comentariu " la " / comentariu /`, I'am remarcat schimbări în vioara's CSS.
Am înțeles problema ta mai bine acum, și vioara reflectă unele progrese. Am stabilit reguli implicite pentru toate <selectați> modelului, și de rezervă
.xxlargepentru cei care stiu va fi mai mare decât 480px (și acest lucru funcționează doar pentru tine **stiu** lățimea de
#viewport`, și puteți adăuga manual clasa la acele prea largi. Doar nevoie de un pic de testare)
[Dovada](
)