IE8だと内側に線が引かれてしまいます。

質問

ブラウザ　IE8

スタイルシートで例として

------------------------
h3{
width:230px;
height:60px;
background:#000;
border:3px double #000;
color: #ffffff;
}
-----------------------

このように背景と線の色を同じにすると内側に線が引かれるので２重線になりません。
IE7だと外側に線が引かれるので綺麗な2重線になるのですが・・・

IE8でも外側に線を引くことは可能なのでしょか？

宜しくお願い致します。

回答No.2

kuzumiHK · ベストアンサー

IE8以上やFirefox、Chromeではボーダーを白くすることで2重線になるようです。
border-styleのdobbleの効き方が、IE7以下では違うようですので、
条件付きコメントかIEハックでスタイルの指定を分けます。

▼条件付きコメントでの記述例
<style type="text/css">
h3{
width:230px;
height:60px;
background:#000;
border:3px double #fff;
color: #ffffff;
}
</style>

<!--[if lt IE 7.0]>
<style type="text/css">
h3{
border:3px double #000;
}
</style>
<![endif]-->
※if lt IE 7.0はIE7以下に適用するという意味です。
IE以外ではただのコメントアウトになります。
条件付きコメント内に外部cssファイルへのlinkタグを記述することももちろん可能です。

▼IEハックでの記述例
h3{
width:230px;
height:60px;
background:#000;
border:3px double #fff;
_border:3px double #000; /* IE6ハック */
color: #ffffff;
}

/* 以下、IE7ハック */
*:first-child+html h3{
border:3px double #000;
}

※今回の件ではIEハックでも問題ありませんでしたが、
IE7ハックは、ごく一部のスタイルが、IE8でも効いてしまうバグを確認していますので、
条件付きコメントのほうがより安全ではあります。この辺は好みかもしれませんが。。

お礼

とても参考になりました。

ありがとうございました。

回答No.1

metametamu

それはIE8の挙動が正しくて、IE7までの挙動がバグなんだと思います。
http://journal.mycom.co.jp/special/2006/ie7beta2/011.html
spanとかを追加して力技というのもありですが、今回はwidthとheightが決まっているので背景画像でボーダーも作ってしまう方が何倍も簡単だと思います。

力技でやるとすれば・・・

h3{
width:230px;
}

h3 span{
display:block;
border:3px double #000;
}

h3 span span{
border:0;
height:54px;
background:#000;
color: #ffffff;
}

ちょっとIEで確認できていないので参考まで

お礼

>spanとかを追加して力技というのもありですが、今回はwidthとheightが決まっているので背景画像でボーダーも作ってしまう方が何倍も簡単だと思います。

色々調べたのですが解決が見つからずやはり画像で対応してます。
二重線に拘らなくていいのですが、今後のために解決したいなと思ってました^^;
ありがとうございました。