現在、友人のサイトのデザイン変更中です（実際にはほぼ終了したけど）

スタイルシートを弄り倒してのレイアウト変更は昨日で一段落つき、現在は細々とした画像（ボタンや背景画像、トップバナーなどの小物）を鋭意作成中。

で、ここで困った事が新たに発覚

IEとFireFoxで、同じ画像データが違う色で表示されるんですけど(´Д｀；)

IEとFireFoxでは画像の色が違う

友人のサイトの基本色は、「紫というかピンクで進めよう」、と言う事で、背景に以下の画像を用意して、ガンガン作りこんでいました。

ピンク
▲これが問題の画像。

コイツ、IEではRGB16進で表記すると「#e72c84」 というカラーコードで表記される色で表示されるのですが、FireFoxでは「#ea358e」になります。

ピンク←問題の画像　↓背景色#e72c84

 

ピンク←問題の画像　↓背景色#ea358e

上記、IEだと上の例が画像と背景が同化し、FireFox、サファリ、グーグルクロームあたりは下の例が画像と背景が同化しているはず。同じ画像を使っているのに。

ピンクはピンクですが、目に見えて違う色です。
画像の無い部分の背景をカラーコードで指定しようと思うと、IEでキレイに表示させるとFireFoxでは変な色ムラ発生、FireFoxでキレイに表示させようと思うとその逆でIEで以下同文(´Д｀；)

WindowsとMacで表示される色が結構ちがうと云う話は良く聞きますが、コレも同じような現象なんでしょうか・・・？
自分のブログやサイトを作る時はいつも白基調で作っていたので、こういう現象に今まで全く気が付きませんでした。

IEとFireFox、どっちがイケナイ子なの？

最近話題のグーグルクロームで同様に色確認してみると、FireFoxと同じ色に。
と云う事はたぶんSafariもFireFoxと同じ色になりますね。
（Operaは未確認）

ん～、多分IEがイケナイ子と見て良さそう。
ってか、ブラウザの歴史を考えればIEがダメっ子ちゃんなのは明らかなんですが（笑）

IE、FireFox、両方で画像と背景色を馴染ませるスタイルシート

さてさて、ココから解決方法。

IEが互換モードで表示されている場合は、スタイルシートを 以下の様に書けばOKです

body{
background:#ea358e;
_background:#e72c8; 
}

上記はBODYについての記述ですが、pタグだろうが、DIVタグだろうが、個別のID、CLASS、何でもOK。「_」（アンダーバー）を各記述の直前につけてやる事で、何故かIEのみ有効なタグとして読み込んでくれます。（アンダーバーを付けた記述は正規の記述の後に書く事）

スタイルシートに「_」（アンダーバー）を記述してIEだけ別形式のスタイルで表示させる技はbackgroundだけでなく、Paddingやmarginなどなど、すべてのタグで有効。

 

IEが標準モードで表示されている場合は、HTMLのHEAD内に 以下の記述

<head>
～～～～～～～
～～～～～～～
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="http://～～各サイトのパス～～/site.css"type="text/css">
<!--[if IE ]>
<style type="text/css"><!--#container,#blogcontainer,#content,{background:#e72c84;}--></style>
<![endif]-->

</head>

<!--[if IE ]>　～～～～　<![endif]-->
の表記があると、その間はIEのみ読み込んでくれますので、それを利用します。
<!--[if lte IE 6 ]>　～～～～　<![endif]-->
のように書くと、IE6のみその間を有効にしてくれます。

上記の例では#container,#blogcontainer,#contentと云うIDのコンテナの背景色のみ変更する場合です。ここに「<linkrel="stylesheet" href="http://～～各サイトのパス～～/ie.css"type="text/css">」のような記述をして別個スタイルシートを読ませるのもアリです。