fieldset firefox débordement correctif CSS

Comment puis-je définir le contenu à déborder dans fieldset? Cela fonctionne dans IE mais pas dans FF.fieldset firefox débordement correctif CSS

Même fonctionnalité que je peux atteindre avec l'élément div dans les deux navigateurs.

Exemple:

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

Source

2009-11-04 jmav

J'ai collé ceci dans un document HTML et les deux cases semblent identiques dans Firefox (3.5). Dans Internet Explorer, ils ont un rembourrage interne différent. Une astuce pratique pour CSS est de démarrer tout sans padding et sans marge: * {padding: 0; marge: 0} et juste appliquer ceux dont vous avez besoin, chaque navigateur a tendance à mettre différents paddings et marges par défaut sur les éléments. – MalphasWats

solution trouvée, ajouter du style css conditionnel:

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

Source

2009-11-05 13:04:49 jmav

Parfait! Je vous remercie! Notez que vous ne pouvez pas faire flotter le fieldset. J'ai fait une vitrine de violon avec aussi le soutien d'Opera: http://jsfiddle.net/dsHUW/5/ – falsarella

Merci! Juste confirmé: ce bug existe toujours dans FF 20.0.1 et existe aussi dans Safari 5.1.2. Fonctionne bien dans Chrome et IE 7-10. 'display: table-column;' l'a corrigé pour Firefox, mais pas Safari. IE ne rendra pas le fieldset du tout (doit utiliser 'display: block', la valeur par défaut, à la place). Chrome ne semble pas se préoccuper de savoir si c'est «block» ou «table-colonne», rend bien de toute façon. [Voir le violon] (http://jsfiddle.net/VVjnr/) (Tous les tests effectués dans Windows 7 SP1) – nothingisnecessary

'Afficher: table-colonne;' ne résout pas le problème dans Chrome 36 –

-1

vous n'avez pas besoin de déborder le contenu! Dans IE (6), par défaut, le tag "fieldset" n'a pas de remplissage, dans FF il l'a! C'est pourquoi vous avez un comportement différent!

Vous pouvez réinitialiser le remplissage (padding: 0px;) du fieldset mais dans ce cas, dans FF, l'étiquette ne semble pas très bien! Pour résoudre ce problème, vous pouvez réinitialiser le padding-bottom du fieldset et appliquer un "margin-left: -12px" à la div à l'intérieur du fieldset. Cependant, cela résout le problème avec FF, mais génère un problème dans IE! Donc, ma suggestion est d'utiliser des instructions CSS conditionnelles pour appliquer à chaque navigateur les bonnes règles de style!

Source

2009-11-04 14:10:57 BitDrink

J'ai essayé mais pas de succès. – jmav

Ceci est en fait un bug dans Firefox et il existe depuis près de 8 ans. : D https://bugzilla.mozilla.org/show_bug.cgi?id=261037

Source

2012-07-17 06:02:27 Jerome

Ce bug est toujours présent dans FireFox 32 et Chrome 36. –

Est-ce un bug? Quoi qu'il en soit, il est toujours présent dans FF v54.0.1 - Il suffit d'utiliser le correctif 'fieldset {display: table-column;}' et ça marche parfaitement! – B4NZ41

@ B4NZ41 Dans FF 52.5.3 ESR le 'fieldset {display: table-column;}' ne résout pas les problèmes overflow + width et ne peut pas fonctionner pour l'élément fixed/absolute positionné (automatiquement converti en display: block mais ressemble à display: table). J'ai essayé mais je ne travaille pas. Mauvaise nouvelle: Chrome a "amélioré" le fieldset pour qu'il fonctionne comme dans Firefox. C'est triste. – 18C

d'un blog post par Emil Björklund:

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

Source

2015-04-17 09:28:36 Gebb

1000X oui, merci pour cela. Cela devrait être accepté réponse, l'autre ne prend pas d'autres navigateurs sauf ie en compte. – Bryan

Ne fonctionne pas pour moi dans Firefox et Chrome. – 18C

fieldset firefox débordement correctif CSS

Répondre

Questions connexes