HTML/CSSを使用した水平線

Question

ブログのサイトで水平線を使用しようとしていますが、Google Chromeで線を表示する際に問題があります（IEとFirefoxは完全に表示します）。

基本的に、私のCSSで、私は以下があります、グーグルクロームでは、ラインがちょうどあるいくつかの理由

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

：私のHTMLで

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

div.hr hr { 
display: none; 
} 

、私のようなものを持っていますいない。 問題は今、私はこれらの多く（約25）：

---

を持っているので、自分のCSSだけを変更して、自分のHTMLに最小限の変更を加えたいと考えています。

グーグルでは、多くの人がこの問題を抱えていることがわかりましたが、適切な解決策がないようです（行を「描画」して写真を挿入することは考慮しません）。

誰かが上記の問題を解決するために正しい方向に向けることができたら、私は感謝します。

多くのありがとうございます。

Answer 1

これはあなたの問題かもしれません：

height: .05em; 

クロームは小数と少しファンキーなので、固定ピクセルの高さを試してみてください。

height: 2px; 

Answer 2

かのheight: 0.1em;ドルソ、最小限のサイズに変更し表示可能なものはすべて1pxです。

あなたが使用している0.05 emは、この要素の現在のフォントサイズをピクセルで取得し、その5％を与えます。 12ピクセルで0.6ピクセルを返します。これは表示するには小さすぎます。 divのフォントサイズをatleast 20pixelsにすると、うまく表示されます。私はクロムdoesntは、他のブラウザが行うatleast 1pixelになるサイズをラウンドしないと思います。

Answer 3

私はこの私の新しいコードを試してみると、それはあなたに役立つかもしれないが、それは私が前と後にそれを使用しますが、私の場合には、このようにそれを行うにも可能性が

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

Answer 4

グーグルchromrで完璧に動作しますH1（ブルートフォースそれehehehe）

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

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

文字間隔は、それはとてもラインがテキストで取得するだけですぐにそれをプッシュするのマージンを使用して行った場合！