fieldset przepełnienie firefox CSS naprawić

Jak mogę ustawić zawartość do przepełnienia w zestawie? Działa w IE, ale nie w FF.fieldset przepełnienie firefox CSS naprawić

samą funkcjonalność można to osiągnąć z div element w obu przeglądarkach.

Próbka:

<fieldset style="border:thin solid #990033;"> 
    <legend>test</legend> 
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div> 
</fieldset> 
<p>&nbsp;</p> 
<div style="border:1px solid #999999; padding:0 8px 8px 8px;"> 
    <label style="background-color:#FFFFFF; padding:0 5px; position:relative; top:-10px;" >test</label> 
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div> 
</div>

Źródło

2009-11-04 jmav

I ten wklejony do dokumentu HTML i oba pola wyglądają identycznie Firefox (3.5). W przeglądarce internetowej mają różne wewnętrzne dopełnienie. Poręczny trik dla CSS jest zacząć wszystko off bez wyściółki i bez marginesu: * {padding: 0; margin: 0} i zastosuj tylko te, których potrzebujesz, każda przeglądarka ma tendencję do umieszczania różnych domyślnych padów i marginesów na elementach. – MalphasWats

Znaleziono rozwiązanie, dodać warunkowego stylów CSS:

fieldset { 
    display: table-column; 
} 
<!–[if IE]> 
fieldset { 
    display: block; 
} 
<![endif]–>

Źródło

2009-11-05 13:04:49 jmav

Idealny! Dziękuję Ci! Zauważ, że nie możesz unieść zestawu pól. Zrobiłem także gablotkę z obsługą Opera: http://jsfiddle.net/dsHUW/5/ – falsarella

Dzięki! Właśnie potwierdzono: ten błąd nadal istnieje w FF 20.0.1 i istnieje również w Safari 5.1.2. Działa dobrze w Chrome i IE 7-10. 'display: table-column;' naprawiono dla przeglądarki Firefox, ale nie Safari. IE nie wyrenderuje zestawu pól (musi zamiast tego używać 'display: block', domyślnie). Wygląda na to, że Chrome nie przejmuje się tym, czy jest to "blok" czy "kolumna-tabela", czy też nie. [Zobacz skrzypce] (http://jsfiddle.net/VVjnr/) (Wszystkie testy przeprowadzone w systemie Windows 7 SP1) – nothingisnecessary

'display: table-kolumny;' nie rozwiązać problem w Chrome 36 –

-1

nie trzeba przelewać zawartość! W IE (6) domyślnie tag "fieldset" nie ma dopełnienia, w FF ma! Dlatego masz inne zachowanie!

Można zresetować padding (padding: 0px;) z zestawu konkretną ale w tym przypadku, w FF, etykieta nie wygląda dobrze! Aby to naprawić, możesz zresetować padding-bottom zestawu pól i zastosować "margin-left: -12px" do div wewnątrz zestawu pól. Jednak to rozwiązuje problem z FF, ale generuje problem w IE!

Więc moja propozycja jest użycie warunkowe oświadczenia CSS dla każdej przeglądarki właściwych zasad stylu!

Źródło

2009-11-04 14:10:57 BitDrink

Próbowałem, ale nie sukces. – jmav

Właściwie jest to błąd w Firefoksie i istnieje od prawie 8 lat. : D https://bugzilla.mozilla.org/show_bug.cgi?id=261037

Źródło

2012-07-17 06:02:27 Jerome

Ten błąd jest nadal obecny w FireFox 32 i Chrome 36. –

Czy to błąd? cokolwiek, wciąż jest obecne w FF v54.0.1 - Po prostu użyj poprawki 'fieldset {display: table-column;}' i działa idealnie! – B4NZ41

@ B4NZ41 w FF 52.5.3 ESR 'fieldset {wyświetlacza table kolumn;}' nie rozwiązuje przelewowym + szerokości problemów i nie działa na stałym/absolutny elementu umieszczonego (automatycznie przekształca się display: blok ale wygląda na wyświetlaczu: stół). Próbowałem, ale nie działa. Złe wieści: Chrome "ulepszył" zestaw pól, aby działał jak w firefoxie. To jest smutne. – 18C

z bloga post Emil Björklund:

body:not(:-moz-handler-blocked) fieldset { 
    display: table-cell; 
}

Źródło

2015-04-17 09:28:36 Gebb

1000X tak, dziękuję za to. To powinna być akceptowana odpowiedź, druga nie bierze żadnych innych przeglądarek, z wyjątkiem np. Pod uwagę. – Bryan

Nie działa dla mnie w przeglądarkach Firefox i Chrome. – 18C

fieldset przepełnienie firefox CSS naprawić

Odpowiedz

Powiązane problemy