Chaque fois que j'ajoute "border: 0" sur mon élément hr, beaucoup de mes éléments hr cessent d'afficher complètement

Question

Fondamentalement, j'utilise une série d'éléments hr pour sectionner ma page web. C'est ce que mon CSS ressemble ci-dessous:

hr{ 
    content: " "; 
    display: block; 
    height: .1px; 
    width: 95%; 
    margin:15px; 
    background-color: #dfdfdf; 
    border:0; 
} 

La chose étrange est que chaque fois que j'ajouter « frontière » provoque plus d'un demi de mes éléments pour arrêter l'affichage sur la page complètement. Quel pourrait être le problème ici? Comment devrais-je résoudre ce problème?

P.S. la même chose arrive si j'utilise aussi "border-width: 0px".

Answer 1

Le problème vient certainement du height: .1px; si vous supprimez la bordure, l'élément sera inférieur à la taille d'un demi-pixel! Comme un pixel ne peut pas être coupé en morceaux, les navigateurs auront tendance à ne pas l'afficher ou à afficher un pixel complet. Selon ... pas exactement sûr de quoi.