Ligne horizontale utilisant HTML / CSS

Je suis en train d'essayer d'obtenir une ligne horizontale à travailler dans mon site de blog, mais j'ai de la difficulté dans l'affichage de la ligne dans google chrome (IE et Firefox affichage parfaitement).

En gros, dans mon CSS, j'ai le texte suivant:

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 code HTML, j'ai quelque chose comme:

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

Pour une raison quelconque, dans google chrome, la ligne est tout simplement pas là.
Le problème est maintenant, j'ai beaucoup de ceux-ci (environ 25):

et donc, je cherche à modifier mon CSS, pour que je puisse faire un minimum de changements de mon code HTML.

Sur google, je vois que beaucoup ont eu ce problème, mais il ne semble pas être une bonne solution (ne pas considérer "dessin" de une ligne et l'insertion de la ligne comme un pic!!!).

Je vous serais reconnaissant si quelqu'un pouvait me diriger dans la bonne direction pour résoudre le problème ci-dessus.

Merci beaucoup.

source d'informationauteur AJW

  1. 17

    Ce pourrait être votre problème:

    height: .05em;

    Chrome est un peu funky avec des décimales, alors essayez un fixe de pixels hauteur:

    height: 2px;
  2. 10

    J'ai essayer mon nouveau code, et il pourrait être utile pour vous, il fonctionne parfaitement dans google chromr

    hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}
  3. 4

    Ou la modifier à height: 0.1em; orso, la taille minimale de quoi que ce soit affichable est 1px.

    De 0,05 em vous êtes en utilisant tous les moyens, d'obtenir la taille actuelle de la police en pixels de cet élément et de me donner 5% de celui-ci. Qui pour 12 pixels retourne 0.6 pixels ce qui est trop peu à l'écran. si vous augmentez la taille de la police de la div pour atleast 20pixels il affiche bien. Je suppose que google Chrome ne marche pas rond jusqu'à des tailles pour être atleast 1pixel où les autres navigateurs n'.

  4. 1

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

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

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

    Si l'espacement des lettres qui le rend si la ligne obtenez dans le texte, il suffit d'utiliser une marge à le repousser!