web-dev-qa-db-ja.com

HTML / CSSを使用した水平線

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

基本的に、私のCSSには次のものがあります。

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

div.hr hr {
display: none;
}

私のHTMLには、次のようなものがあります。

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

なんらかの理由で、Google Chromeでは、行がそこにありません。問題は、これらがたくさんあることです（約25）。

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

誰かが上記の問題を解決するために私を正しい方向に向けることができれば幸いです。

どうもありがとう。

htmlcsshtml5google-chromecss3
16
AJW

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

height: .05em;

Chromeは小数部が少しファンキーなので、固定ピクセルの高さを試してください：

height: 2px;
17
Blender

私はこれを私の新しいコードで試してみましたが、あなたにとって役立つかもしれません、それはグーグルクロームで完全に動作します

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

または、height: 0.1em; orsoに変更します。表示可能なものの最小サイズは1pxです。

あなたが使用している0.05 emは、この要素のピクセル単位で現在のフォントサイズを取得し、その5％を私に与えます。これは12ピクセルに対して0.6ピクセルを返し、表示するには少なすぎます。 divのフォントサイズを20ピクセル以上に上げると、うまく表示されます。 Chromeは、他のブラウザーが行うサイズを少なくとも1ピクセルに切り上げないことを想定しています。

4
Benjamin Udink ten Cate

また、この方法でそれを行うことができます、私の場合は、h1の前後にそれを使用します（強引にそれをehehehe）

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

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

文字間隔により行がテキスト内に収まるようになっている場合、マージンを使用してそれを押しのけてください！

1
William Roy