web-dev-qa-db-fra.com

Ligne horizontale utilisant HTML / CSS

J'essaie de faire fonctionner une ligne horizontale sur mon site de blog, mais j'ai du mal à afficher la ligne dans google chrome (IE et Firefox l'affiche parfaitement).

Fondamentalement, dans mon CSS, j'ai les éléments suivants:

div.hr {
background: #fff  no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}

div.hr hr {
display: none;
}

Dans mon HTML, j'ai quelque chose comme:

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

Pour une raison quelconque, dans Google Chrome, la ligne n'est tout simplement pas là. Le problème est maintenant, j'en ai beaucoup (environ 25):

Lors de la recherche sur Google, je vois que beaucoup ont eu ce problème, mais il ne semble pas y avoir de solution appropriée (ne pas envisager de "dessiner" une ligne et insérer la ligne en tant que photo!).

J'apprécierais que quelqu'un me pointe dans la bonne direction pour résoudre le problème ci-dessus.

Merci beaucoup.

htmlcsshtml5google-chromecss3
16
AJW

Cela pourrait être votre problème:

height: .05em;

Chrome est un peu génial avec des décimales, alors essayez une hauteur de pixel fixe:

height: 2px;
17
Blender

J'ai essayé mon nouveau code et cela pourrait vous être utile, il fonctionne parfaitement dans Google Chrome

hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}
10
user2155518

Ou changez-le en height: 0.1em; ou, la taille minimale de tout élément affichable est de 1px.

Les 0,05 em que vous utilisez signifient, obtenez la taille de police actuelle en pixels de ces éléments et donnez-moi 5% de celle-ci. Ce qui pour 12 pixels renvoie 0,6 pixel, ce qui est trop peu pour être affiché. si vous augmentez la taille de la police du div à au moins 20 pixels, cela s'affichera bien. Je suppose que Chrome ne arrondit pas les tailles pour être au moins 1pixel où les autres navigateurs le font.

4
Benjamin Udink ten Cate

vous pouvez aussi le faire de cette façon, dans mon cas je l'utilise avant et après un h1 (force brute ehehehe)

.titleImage::before {
content: "--------";
letter-spacing: -3px;
}

.titreImage::after {
content: "--------";
letter-spacing: -3px;
}

Si l'espacement des lettres fait que la ligne entre dans le texte, utilisez simplement une marge pour la repousser!

1
William Roy