Problem

mam<select> gdzie jeden z jego<option>Wartości tekstowe są bardzo długie. Chcę<select> zmienić rozmiar, aby nigdy nie był szerszy niż jego rodzic, nawet jeśli musi odciąć wyświetlany tekst.max-width: 100% powinien to zrobić.

Przed zmianą rozmiaru:

Co chcę po zmianie rozmiaru:

Ale jeśli tyzaładuj ten przykład jsFiddle i zmień rozmiar szerokości panelu Wynik, aby był mniejszy niż szerokość panelu<select>, widać, że zaznaczenie wewnątrz<fieldset> nie skaluje swojej szerokości w dół.

Co faktycznie widzę po zmianie rozmiaru:

Jednakżeodpowiednik strony z<div> zamiast<fieldset> skaluje się prawidłowo. Możesz to zobaczyć iprzetestuj swoje zmiany łatwiej Jeśli masza <fieldset> i a<div> obok siebie na jednej stronie. I jeśli tyusuń otoczenie<fieldset> tagi, działa zmiana rozmiaru. The<fieldset> tag powoduje w jakiś sposób zmianę rozmiaru w poziomie.

The<fieldset> działa tak, jakby istniała reguła CSSfieldset { min-width: min-content; }. (min-content oznacza, w przybliżeniu, najmniejszą szerokość, która nie powoduje przepełnienia dziecka.) Jeśli zastąpię<fieldset> z<div> zmin-width: min-content, wygląda dokładnie tak samo. Jednak nie ma regułymin-content w moich stylach, w domyślnym arkuszu stylów przeglądarki lub w Inspektorze CSS Firebuga. Próbowałem zastąpić każdy styl widoczny na stronie<fieldset> w Inspektorze CSS Firebuga iw domyślnym arkuszu stylów Firefoksaform.css, ale to nie pomogło. Szczególnie nadrzędnymin-width iwidth nic nie zrobiłam.

Kod

HTML zestawu pól:

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

Mój CSS, który powinien działać, ale nie:

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

select {
    max-width: 100%;
}

Resetowaniewidth właściwości dodomyślne nic nie robi:

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

Dalsze CSS, w którym jaspróbuj rozwiązać problem:

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

Więcej szczegółów

Problem występuje również w tymbardziej kompleksowy, bardziej skomplikowany przykład jsFiddle, co jest bardziej podobne do strony internetowej, którą próbuję naprawić. Widać z tego, że<select> to nie problem - blok inlinediv również nie zmienia rozmiaru. Chociaż ten przykład jest bardziej skomplikowany, zakładam, że poprawka dla powyższego prostego przypadku również rozwiąże ten bardziej skomplikowany przypadek.

[Edytuj: zobacz szczegóły obsługi przeglądarki poniżej.]

Ciekawą rzeczą w tym problemie jest tojeśli ustawiszdiv.wrapper { width: 50%; }, the<fieldset> przestaje zmieniać rozmiar w punkcie, a następnie w pełnym rozmiarze<select> uderzyłby w krawędź rzutni. Zmiana rozmiaru odbywa się tak, jakby<select> mawidth: 100%, nawet jeśli<select> wygląda takwidth: 50%.

Jeśli tydać<select> samowidth: 50%, to zachowanie nie występuje; szerokość jest po prostu poprawnie ustawiona.

Nie rozumiem przyczyny tej różnicy. Ale to może nie być istotne.

Znalazłem też bardzo podobne pytanieZestaw pól HTML pozwala dzieciom na nieograniczoną rozbudowę. Pytający nie mógł znaleźć rozwiązania idomyśla się, że nie ma rozwiązania oprócz usuwania<fieldset>. Ale zastanawiam się, czy to naprawdę niemożliwe<fieldset> wyświetl prawo, dlaczego tak jest? Co w<fieldset>Sspec lubdomyślny CSS (jak na to pytanie) powoduje to zachowanie? To specjalne zachowanie jest prawdopodobnie dokumentowane gdzieś, ponieważ wiele przeglądarek działa tak.

Cel i wymagania w tle

Powodem, dla którego próbuję to zrobić, jest pisanie stylów mobilnych dla istniejącej strony o dużej formie. Formularz ma wiele sekcji, a jedna jego część jest zapakowana w<fieldset>. Na smartfonie (lub jeśli okno przeglądarki jest małe), część strony z<fieldset> jest znacznie szerszy niż reszta formularza. Większość formularza dobrze ogranicza szerokość, ale sekcja z<fieldset> nie, zmuszając użytkownika do pomniejszenia lub przewijania w prawo, aby zobaczyć całą tę sekcję.

Obawiam się po prostu usunąć<fieldset>, ponieważ jest generowany na wielu stronach w dużej aplikacji, i nie jestem pewien, jakie selektory w CSS lub JavaScript mogą od niego zależeć.

W razie potrzeby mogę używać JavaScript, a rozwiązanie JavaScript jest lepsze niż nic. Ale jeśli JavaScript jest jedynym sposobem, aby to zrobić, byłbym ciekawy wyjaśnienia, dlaczego nie jest to możliwe przy użyciu tylko CSS i HTML.

Edytuj: obsługa przeglądarki

Na stronie muszę obsługiwać Internet Explorer 8 i nowsze wersje (właśnie porzuciliśmy obsługę IE7), najnowszy Firefox i najnowszy Chrome. Ta strona powinna również działać na smartfonach z systemem iOS i Android. Nieznacznie zdegradowane, ale nadal użyteczne zachowanie jest dopuszczalne w programie Internet Explorer 8.

Przetestowałemmoje złamanefieldset przykład w różnych przeglądarkach. W rzeczywistości działa już w tych przeglądarkach:

Internet Explorer 8, 9 i 10ChromChrome na Androida

Łamie się w tych przeglądarkach:

FirefoxFirefox dla AndroidaInternet Explorer 7

Tak więc jedyną przeglądarką, na której mi zależy, że obecny kod włamuje się, jest Firefox (zarówno na komputerze stacjonarnym, jak i mobilnym). Jeśli kod został naprawiony, to działał w Firefoksie bez przerywania go w innych przeglądarkach, co rozwiązałoby mój problem.

Szablon HTML witryny używa komentarzy warunkowych programu Internet Explorer do dodawania takich klas.ie8 i.oldie do<html> element. Możesz użyć tych klas w swoim CSS, jeśli potrzebujesz obejść różnice stylizacji w IE. Dodane klasy są takie same jak wta stara wersja HTML5 Boilerplate.