IE8で水平線（点線）を表示させるには？

質問

ホームページを作っているのですが、行き詰ってしまったので質問します。

点線を入れるために、
<hr align="left" width="450" size="1" color="#99E655"　style="border-style:dotted">
と打ったのですが、点線が表示されませんでした…。

firefoxではなんとなく表示できたのですが、IE8では太い１本線になってしまいました。

調べたところ、IE8では水平線がおかしくなるようなことが書いてあったので、何か別の方法を知っている方は教えてください。

回答No.2

abril · ベストアンサー

hrのスタイルについてはかなりUA（ブラウザの種類・ヴァージョンの事だと思っておいて下さい）によって解釈が違うところがあるので、色々なプロパティを調整しないと見た目に差が出ます。

下記などが参考になるかと思います。
http://coliss.com/articles/build-websites/operation/css/198.html
（一番下の「スタイルの初期化 -その他」のところでhrの初期化について書かれています）
上記を参考にすれば、、質問者様の実現したいスタイルであれば、下記の様にカスタマイズする事になります。

hr {
width: 450px;
height: 0px;
margin: 7px 0;
border: none;
border-top: dotted 1px #99e655;
}
* html hr {/* for -IE6 */
margin: 0;
}
*:first-child+html hr {/* for IE7 */
margin: 0;
}

ただし、上記もIEはver.7までの検証ですし、私の手元にもver.8がないので、IE8の実際の表示結果は見ていません。

これでうまくいかない様であれば、"論理構造上その箇所にhrが必須ではなく"、単に見た目上”点線を入れる”というスタイルを与えたいだけなら、点線を表示したい位置の前後のコンテナにborderプロパティで直接スタイルを与えた方が楽ではありますね。

コンテナ1
点線
コンテナ2

上記の様な構造であれば、コンテナ1にborder-bottom/padding-bottom/margin-bottom等のプロパティに適切な値を与えるか、コンテナ2の方のborder-top/padding-top/margin-top等のプロパティで調整するか、のいずれかで両ブロックの間に線を引く事ができます。

お礼

素早い回答ありがとうございます。
始めので思い通りの線がひけました!!
ver.8で確認できました、ありがとうございます＾＾
スタイルでやるなんて考えていなかったのでとても助かりました。

回答No.3

noname#119957

■hrは背景画像のリピートで対処すれば楽です。
■しかし、これも面倒なので私の場合は、ＣＳＳの<div></div>などのＢＯＸモデルの上下のボーダーを利用しています。

お礼

素早い回答ありがとうございます。
背景画像でやる方法もあるんですね、この方法なら点線だけじゃなくてどんな画像でも区切り線のように使えますね、気づきませんでした。ありがとうございます＾＾
BOXについてはまだ私の理解が足りないので、今後きちんと理解できてから使用させていただきます。

回答No.1

torayoshi

水平線ってブラウザ、バージョンの違いで見え方違うから面倒ですわね。
点々を初期値にしてしまうとIE8では間隔が狭すぎて一本の線に見えてしまう。
で、とりあえずこんな感じに(検証IE8,Firefox3.5.1)
<hr align="left" style="width:450;border-style:dotted;border-width:2 0 0 0;border-color:#99e655;height:1;">
でもコレ↑"dashed"とおんなじ(笑)
Firefoxと見え方同じにするなら
<hr align="left" style="width:450;border-style:dotted;border-width:2 0 0 0;border-color:#99e655;height:2;">
点々大きくする(小さいと繋がって見える)ので幅を2pxに(IEは2pxより大きくならない)
"dashed"が一番無難かもです。

お礼

素早い回答ありがとうございます。
間隔が狭すぎて１本線に見えてしまうんですか、知りませんでした。
一番上ので、いい感じの線が引けました、ありがとうございます＾＾
dashedでも素敵な線が引けたので、どこかで使おうと思っております。