IEでは hr タグの border を消せない。そもそも hr はタダの水平線だった。

IEでは hr タグの border を消せない。そもそも hr はタダの水平線だった。

IE6 (Internet Explorer 6) では、線を引くブロック要素 hr タグのボーダー (border) を CSS で { border :0px none; } としても消せません。

IEでは hr タグのボーダーを消せない
参照: ヨモツネット 実験室 » hr要素をかっこよく使う

IEでは


のボーダーを消せない例

このBlogのtopページでは今まで、素のhrタグで区切りの線を表示してて、新しく区切り線の画像を作ったのでhrにCSSで背景画像をつけて区切り線にしようと思ったんですが、以下の画像の様にIE6ではhrタグのborderが消えずに変な事になってしまいました。

IE6の場合
ie-hr-border

FIrefoxの場合
ie-hr-border

hr { border :0px none #000; } 

とやっても、画像の周辺にボーダーが出来てしまって、border-cololrでの色の変更もうまくいきません。

そもそも


はタダの水平線だった

またIE6のバグかぁ、と思ったんですが、これはバグとゆうよりは hr タグの解釈の仕方の問題なのかもしれません。

(x)html に於ける h1 や blockquote などのタグにはそれぞれ意味があって、h1なら一番めの見出しとゆう意味、blockquoteなら引用文とゆう意味です。これは紙に書いた文字と違って、デザインや見た目などに頼らず、文章の意味を理解しやすくするためにあって、ロボットや視覚障害者を助けます。

で、僕は今まで hr タグは (x)html 言語としての意味のある”区切り”の事だと思ってた、つまり、h1 blockquote などのタグと同様にhtmlページ内における意味がタグに込められているものだと思っていたんですが、そうでは無くて、hr は見栄えのためだけのタグだったんです。

hr タグにはhtmlページに於ける”区切り”とゆう意味はなく、ただの見た目に水平線が描かれるだけの意味は全くないタグなのでした。

hr 要素はb要素やi要素などと同じく「見栄えのための要素」だという指摘を受けました。HTML4.01では非推奨要素にはなっていないものの、XHTML ではプレゼンテーションモジュール(Presentation Module)に分類されていて、「見栄え」のための要素だとのこと。HTML4.01の仕様でも、「水平線を描く」としか書かれておらず、「区切る」とは説明されていません。XHTML2.0では「区切り」を表現するために、separator要素が加わることになってるようです。

1本だけ線を引く - スタイルシートTIPS ふぁくとりー

hr はタダの水平線なので、その定義に沿ってborderを消さない (borderを消すと線じゃなくなる) とゆうIE6の解釈は、あってもいいのかもしれません。余計なお節介でもありますが。

結局僕は、


をdivの空要素

に変更しました。

参考・参照

IEでは hr タグのボーダーを消せない
ヨモツネット 実験室 » hr要素をかっこよく使う

hr タグは、 XHTML ではプレゼンテーションモジュール(Presentation Module)「見栄え」のための要素
1本だけ線を引く - スタイルシートTIPS ふぁくとりー

photo by docman