1. ホーム
  2. Web制作
  3. HTML/Xhtml

各ブラウザのhrタグに関する注意点

2022-01-16 17:37:21
一般にはほとんど目にすることのない人事ですが、ひとたび目にすれば、生死を左右することもあります。ここでは、写真を添付する代わりに、参考までに列挙しておこう。 <テーブル 通常ブラウザ IE6、7 ファイアフォックス 実際の高さ 高さ + 右の枠線幅 + 左の枠線幅 高さ 高さ 背景色 背景色 background+color(height<2pxの時、高さをグレーの突起で表示、色を設定する必要がある、テキストと同じ) 背景色

例えば、実際の高さが3px、4辺が1px、ボーダーカラーが#07f、それ以外が#f60の仕切りを作りたい場合、以下のようなイメージになる。

コピーコード
コードは以下の通りです。

hr{
height:1px;
*height:3px; color:#f60;/* for ie6 ie7 */;
background-color:#f60;
border:1px solid #07f;
}
@-moz-document url-prefix(){ hr{height:3px;}} /* for firefox */

他にもっと手間のかからない解決策はないのでしょうか?