HTML / CSS: Un élément, 1 pixel de haut, 100% de large, 0 images, couleur unique, tous les navigateurs

Je suis à la recherche d'un moyen de faire quelque chose qui à mon avis devrait être super simple, mais je ne pouvais pas le comprendre...

Je veux un élément graphique sur ma page web qui est exactement de 1 pixel de haut, 100% de large et a une certaine couleur, disons rouge. Il devrait ressembler exactement le même dans tous les navigateurs et doit, de préférence, pas de rupture de la sémantique de trop.

Je ne veux pas utiliser les images pour cela et je ne veux pas utiliser plus d'un élément HTML. Bien sûr, je ne vais pas utiliser de JavaScript.

J'ai essayé le vieux classique qui a probablement beaucoup d'entre vous le savent:

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

<style ...>
.hr {
    height: 1px;
    background: red;
    width: 100%;
    font-size: 1px; /* IE 6 */
}
</style>

Le problème avec la solution ci-dessus est que IE6 rendra ce que deux ou trois pixels de haut, pour s'adapter à la non-existant contenu de la div.

Des idées?

source d'informationauteur Deniz Dogan | 2009-08-11

  1. 7

    l'ajout d'un overflow: hidden; style devrait résoudre le problème.

  2. 14

    il suffit de ne

    .hr {
  height: 0px;
  margin: 0px;
  border-bottom: 1px solid #FF0000;
  font-size: 1px;
}

    Je suis passé par la même chose quand j'étais nouveau CSS.

  3. 3

    Je n'ai pas IE6 portée de main pour tester, mais une réelle RH, peuvent fonctionner dans les navigateurs modernes. M'a fallu quelques essais pour réaliser vous de définir la couleur d'arrière-plan pas la couleur de la bordure:

    hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }

    (ajuster en fonction)

  4. 2

    Je n'ai pas IE6 pour tester cela, mais je me souviens qu'il avait à faire quelque chose avec la hauteur de la ligne. Avez-vous essayé?

    line-height: 1px;