Hr Tag dans IE - supprime la bordure

Question

Dans les autres navigateurs sauf IE7 et inférieur, le hr affiche une bordure autour de la balise hr que je ne veux pas.

<!--[if lte IE 7]> 
<style type="text/css"> 
hr { 
    margin: -3px 0 0 0; 
    padding: 0; 
    height: 19px; 
    border: none; 
    outline: none; 
    background: url("img/split.png") center no-repeat; 
} 
</style> 
<![endif]--> 

J'ai essayé cette solution, mais elle semble toujours entourée d'une bordure.

Il ressemble à ceci:

alt text http://i46.tinypic.com/dpdabm.jpg

Comment puis-je me débarrasser de lui?

Answer 1

Voir http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm

Il semble qu'il n'y a pas de bonne façon de contourner ce problème, seulement avec un hack (en utilisant un div autour).

Answer 2

Pour éviter ces problèmes, vous pouvez utiliser des balises DIV à la place. Afin de le rendre accessible, mettre HR à l'intérieur comme celui-ci:

<div class="ruler"><hr /></div> 

puis appliquer des styles à elle:

.ruler { border-top: 1px solid black; } 

.ruler hr { display: none; } 

Cela permet de masquer les ressources humaines et faire de la DIV une « règle horizontale ».

Answer 3

Différents navigateurs ont différents modèles pour l'élément 'hr'. C'est pourquoi j'utilise ceci:

hr { 
height: 1px; 
color: #ccc; 
background-color: #ccc; 
border: 0; 
} 

Cela fonctionne sur tous les principaux navigateurs. Il n'y a qu'un seul problème: IE7 et les marges ...

Answer 4

Utilisez uniquement

border:0px 

comme

border:none 

n'est pas une règle valide.

http://www.w3schools.com/cssref/pr_border-style.asp