fieldset firefox Überlauf CSS fix

Wie kann ich Inhalt in Fieldset überfüllen? Es funktioniert in IE aber nicht in FF.fieldset firefox Überlauf CSS fix

Gleiche Funktionalität kann ich mit div-Element in beiden Browsern erreichen.

Probe:

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

Quelle

2009-11-04 jmav

ich dies in ein HTML-Dokument eingefügt und beide Boxen identisch aussehen in Firefox (3.5). Im Internet Explorer haben sie unterschiedliche interne Polsterung. Ein praktischer Trick für CSS ist, alles ohne Polsterung und ohne Rand zu starten: * {padding: 0; margin: 0} und wenden Sie nur diejenigen an, die Sie benötigen, jeder Browser neigt dazu, unterschiedliche Standard-Paddings und Ränder auf Elemente zu setzen. – MalphasWats

gefunden Lösung, fügen bedingten CSS-Stil:

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

Quelle

2009-11-05 13:04:49 jmav

Perfekt! Vielen Dank! Beachten Sie, dass Sie das Fieldset nicht verschieben können. Ich habe eine Showcase-Geige mit Opera-Support gemacht: http://jsfiddle.net/dsHUW/5/ – falsarella

Danke! Nur bestätigt: Dieser Fehler existiert noch in FF 20.0.1 und existiert auch in Safari 5.1.2. Funktioniert gut in Chrome und IE 7-10. 'display: table-column;' hat es für Firefox, aber nicht für Safari korrigiert. IE wird das Feldset überhaupt nicht darstellen (stattdessen muss 'display: block' verwendet werden). Chrome scheint sich nicht darum zu kümmern, ob es "block" oder "table-column" ist. [Siehe die Geige] (http://jsfiddle.net/VVjnr/) (Alle Tests in Windows 7 SP1 durchgeführt) – nothingisnecessary

'display: table-column;' behebt das Problem nicht in Chrome 36 –

-1

Sie müssen nicht den Inhalt überlaufen! In IE (6) hat das "fieldset" -Tag standardmäßig kein Padding, in FF hat es! Deshalb haben Sie ein anderes Verhalten!

Sie können das Padding (Padding: 0px;) des Fieldsets zurücksetzen, aber in diesem Fall sieht die Beschriftung in FF nicht gut aus! Um das zu beheben, können Sie das Padding-bottom des Fieldsets zurücksetzen und ein "margin-left: -12px" auf das div im Fieldset anwenden. Das löst jedoch das Problem mit FF aber erzeugt ein Problem in IE!

Also ist mein Vorschlag, bedingte CSS-Anweisungen zu verwenden, um für jeden Browser die richtigen Regeln des Stils anzuwenden!

Quelle

2009-11-04 14:10:57 BitDrink

Ich habe es versucht, aber nicht erfolgreich. – jmav

Dies ist eigentlich ein Bug in Firefox ist und es besteht fast 8 Jahre. : D https://bugzilla.mozilla.org/show_bug.cgi?id=261037

Quelle

2012-07-17 06:02:27 Jerome

Dieser Fehler ist immer noch in FireFox 32 und Chrome 36. –

Ist es ein Fehler? was auch immer, es ist immer noch in FF v54.0.1 vorhanden - benutze einfach das Update 'fieldset {display: table-column;}' und es funktioniert einwandfrei! – B4NZ41

@ B4NZ41 In FF 52.5.3 ESR löst das 'fieldset {display: table-column;}' keine Überlauf- und Breitenprobleme und kann nicht für fest/absolut positionierte Elemente arbeiten (wird automatisch in display: block umgewandelt, sieht aber wie display aus: Tabelle). Ich habe es versucht, funktioniert aber nicht. Schlechte Neuigkeiten: Chrome hat das Feldset "verbessert", damit es wie in Firefox funktioniert. Es ist traurig. – 18C

Von einem Blog post von Emil Björklund:

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

Quelle

2015-04-17 09:28:36 Gebb

1000X ja, danke dafür. Dies sollte als Antwort akzeptiert werden, der andere nimmt keine anderen Browser außer ie in Betracht. – Bryan

Funktioniert nicht für mich in Firefox und Chrome. – 18C

fieldset firefox Überlauf CSS fix

Antwort

Verwandte Themen