bourrage d'un fieldset, problème avec IE

Que se passe-t-il avec le rendu du remplissage d'un fieldset. Il se comporte comme prévu dans FF et Chrome mais échoue dans IE. Ceci est le code im parle:bourrage d'un fieldset, problème avec IE

<html> 
    <head> 
    </head> 
    <body> 
     <fieldset> 
      <legend>Hello world!</legend> 
      <div>Lorem ipsum</div>     
     </fieldset> 
    </body> 
</html>

Et voici le css

fieldset { 
    border: 1px solid black; 
    padding: 30px; 
    } 
    fieldset legend { 
     background-color: silver; 
    } 
    fieldset div { 
     border: 1px dotted silver; 
    }

peut aussi être vu ici: http://jsfiddle.net/nRAGM/6/

Donc, ma question est la suivante: comment obtenir le code html ci-dessus afficher comme prévu dans IE?

Source

2011-04-12 Muleskinner

Le code suivant est cross-browser compatible.

Vous pouvez contrôler le retrait de la légende du jeu de champs indépendamment. En remplissant le fieldset, vous indentez également la légende. Bien que cela puisse être l'effet désiré dans certains cas, la méthode suivante offre plus de flexibilité. En outre, l'ajout de la marge à la division interne vous donnera un meilleur contrôle de votre mise en page (car l'ajout de remplissage à un conteneur peut ajouter une largeur indésirable).

http://jsfiddle.net/nRAGM/35/

fieldset { 
    border: 2px solid silver; 
} 

fieldset legend { 
    border: 2px solid silver; 
    margin-left: 30px; 
} 

fieldset div { 
    border: 1px dotted silver; 
    margin: 30px; 
}

Source

2011-04-12 09:06:55 wdm

ou le hack vraiment vilain (ou le mettre dans une version conditionnelle [lte IE 8] CSS).

fieldset { 
    border: 1px solid black; 
    padding: 30px; 
} 
fieldset legend { 
    background-color: silver; 
    margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */ 
} 
fieldset div { 
    border: 1px dotted silver; 
}

bas de marge qui la label même que MATELAS du fieldset le tour est joué aussi. évidemment aucun autre navigateur doit obtenir les deux

PS: Je pense que cela fonctionne pour IE6 trop

Source

2011-04-12 09:05:24 clairesuzy

Ajout display:block à FIELDSET style devrait résoudre votre problème. Cela a fonctionné pour moi! Essaie.

Source

2012-08-05 12:55:11

bourrage d'un fieldset, problème avec IE

Répondre

Questions connexes