横罫線hrに画像を使用してブラウザの差異を無くす
hrタグは横罫線を引くものですが、ブラウザによって見た目が異なりますし、デザイン的にもあまりよくありません。
そこで、画像を使うことにより見た目も美しく、ブラウザの差異も無くしてしまいましょう。
しかし、問題があってhrタグの横罫線は普通borderで指定されているのですが、IE6だけ違うんです。なので、IE6だけハックを使って別指定をします。
上記の理由から本当はhrタグをdivタグで囲んでしまったりしたほうがいろいろと便利なのですが、余計なタグを入れるのはソースコードが煩雑になるし、手間もかかりますよね。なので、今回はhrタグのみでやってみます。
また、画像を繰り返して使うのではなくひとつの画像を使います。
サンプル画像
(X)HTMLコード
<hr />hr要素のデザインを個別に指定する場合はclassなどで指定してください。
CSSコード
/* IE6用 */
*html hr {
display :list-item;
width:0;
margin-left:-10px;
list-style :url(hr_line.gif) inside;
}
hr {
border:0;
height: 3px;
background:url(hr_line.gif) 50% 0 no-repeat;
}
画像がセンタリングされるように指定してあります。
｢*html｣を先頭に記述することによりIE6にしか有効になりません。IE6ではどうやってもデフォルトの罫線が消えないので、トリッキーなやり方ですが、displayをリスト形式（list-item）にすることで罫線を消します。そして、画像をリストのマークとして表示します。
リストの位置（list-position）をinsideにして、左マージン（margin-left）を-10pxにすることで、画像をセンタリングすることができます。これはデフォルトでリストマークの横幅が10pxのためだと思います。
IE6以外では、hrの罫線はborderを0にすることで消せるので、画像を背景として表示します。注意点は、内容物が0なので、画像分の高さをheightで指定します。
