Styler la balise <hr /> sous Internet Explorer

Bonjour à vous !

A la fin de l'article, il est dit ceci :

a écrit :
Cette méthode réduit l'espace supérieur sur IE (pas l'espace inférieur), sans - curieusement - modifier le comportement sur les geckos.

Après avoir testé sur Firefox 3.0.6, je constate que cette méthode modifie bel et bien le comportement sur les geckos ! De plus, je signalerai, en guise de rappel (cf. le titre de l'astuce), qu'il s'agit d'une astuce pour Internet Explorer car sous Opéra, Safari, Chrome (et Netscape 9 tant qu'on y est) c'est incompatible !

Cepenant, si quelqu'un a une méthode ("universel") permettant de supprimer l'espace entre la règle et le contenu qui la précède, je suis intéressé ! Si je trouve quelque chose, je vous tiendrai au courant.

Edit: Voici le lien de l'astuce : Styler la balise <hr /> sous Internet Explorer
Modifié par Alphonse (18 Feb 2009 - 11:18)

Voici la solution que j'ai trouvé :

CSS :
/*
Pour tous les browsers dont IE
*/
hr {
	height: 1px;
	margin: -0.5em 0;
	padding: 0;
	color: #F00;
	background-color: #F00;
	border: 0;
}

/*
Pour les Geckos et autres Webkit comme Gecko
*/
html > body hr {
	margin: 0;
}

Remarque: pour le moment, j'ai effectué mes tests uniquement sous Windows XP avec Firefox 3.0.6, Opéra 9.52, IE6, IE7, Netscape 9 (facultatif), Safari et Chrome. Je n'ai pas encore testé sous Mac. Et il faudrait éventuellement tester sous Unix/Linux.

Alphonse, le filtre par le sélecteur laissera juste de côté IE6. Le margin: 0 sera bien appliqué pour tout navigateur moderne, dont IE7 et IE8.

En effet, c'est ce que j'ai pu constater. Toujours est-il que la méthode des marges négatives ne fonctionne pas dans le sens où elle modifie le comportement sur les geckos...

Salut,

si le but est d'appliquer un comportement différent pour IE, pourquoi ne pas utiliser les commentaires conditionnels ?

Tu as tout à fait raison, j'aurai pu utiliser les commentaires conditionnels et créer une feuille de style spéciale pour IE.

Cependant, j'ai résolu mon problème différemment depuis. Au lieu d'utiliser une règle, j'ai appliqué l'attribut border-bottom à mon <div> ce qui me donne le résultat souhaité dans toutes les situations.

A travers ce post, je voulais également souligner le fait que l'astuce contient une faute. Je remarque (à travers mes tests) que le comportement, dûe à l'utilisation de la marge négative, est bel et bien modifié sur les geckos contrairement à ce qui est dit.

a écrit :
A travers ce post, je voulais également souligner le fait que l'astuce contient une faute. Je remarque (à travers mes tests) que le comportement, dûe à l'utilisation de la marge négative, est bel et bien modifié sur les geckos contrairement à ce qui est dit.

Tu as raison, l'astuce n'est sans doute pas à jour. Elle a dû être rédigée à l'époque de Firefox 1.5