HRタグを画像に

質問

スタイルシートを使って、HRタグを画像にしたいのですが・・・

hr {
　border: none;
　height: 14px;
　background: url(image/line.jpg) no-repeat center center;
}

このようにしてみたのですが、ＩＥだけは、どうしてもHRの周りに輪郭線が出てしまいます。
なにかいい方法ないでしょうか？

回答No.3

goldfox · ベストアンサー

<img>を使うくらいなら<div>でいいんじゃないかなと思いますが…

<div class="line"></div>

.line{
height: 14px;
background: url(image/line.jpg) no-repeat center center;
}

もっといいのは<hr>の前後にあるブロック要素の背景にするとかですかね。
そうすれば中身の無い<div>を作らなくてすみます。

お礼

やはり、IEのHRタグの輪郭線はどうにもならないのですね・・
IMGタグというのも、抵抗あるので・・・HTMLを生成するソフトのほうを改造して、DIVタグを生成するようにしてみます。
ありがとうございました！

回答No.4

MrYoYoYo

当方マック環境ですので、確認せず投稿しますが、
border: 0;
上記の指定でどうですか？
width の指定を必要かと思います。

回答No.2

kyanasaki

IE6でいろいろ実験してみましたがやっぱり無理でした。
どうしても、この境界線は表示されるようです。

私ならやはりhrが出来ないならimgで逃げます;
この境界線腹立ちますねー。
お役に立てなくてごめんなさい。

<img src="images/spacer.gif" class="test" alt="" />

img.test {
width:100%;
　height: 14px;
　background: url(images/header_line.gif) center center;
}

お礼

やはり、IEのHRタグの輪郭線はどうにもならないのですね・・
HTMLを生成するソフトのほうを改造して、対応してみます。
ありがとうございました！

回答No.1

doublebeefcake

この輪郭線は消えないと思います。
野暮なやり方かもしれませんが、

▼HTML
<hr /><img src="border.gif" />

▼CSS
hr {
display : none ;
}
img {
height : 14px ;
width : 100% ;
}

じゃだめですか？