IE6の為の「css_browser_selector.js」

IE6の為だけじゃないけど・・・。

IE8やIE7では思い通りのデザインが表示されるのですが、IE6ではどうしてもどうしても思い通りの表示にならなかったので、
苦渋の決断でjavaに頼る事にしました。そして試してみたのが「css_browser_selector.js」。

CSSタグに、直接ブラウザを指定したCSSコーディングができるようです。

■ CSS Browser Selector
http://rafael.adm.br/css_browser_selector/

上記サイトからプログラムを感謝の気持ちを込めて拝借し、ページの＜head＞＜/head＞の間に
＜script type="text/javascript" src="css_browser_selector.js"> を追加。

通常のCSSの指示はこちら。
.example {
position:relative;
top: 384px;
left: 733px;
text-align: left;
margin: 0px;
padding: 0px;
font-size: 10px;
line-height: 140%;
font-weight: normal;
color:#333333;
width: 240px;
height: 0px;
}

IE6専用のCSSの指示はこちら。
.ie6 .example {
position:relative;
top: 414px;
left: 733px;
text-align: left;
margin: 0px;
padding: 0px;
font-size: 10px;
line-height: 140%;
font-weight: normal;
color:#333333;
width: 240px;
height: 0px;
}

他のブラウザでも個別にCSSタグを指定できるようです。
下記例のように、CSSタグの前に各ブラウザ名を指定してあげればOK。

.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.ie8 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}

今回は、前回の記事「1台のPCでIE6,IE7,IE8の表示・動作確認」の内容でも、IE6のバグに対応できなかったので、
「css_browser_selector.js」を試してみました。前回の対策を合わせて対応すれば完璧ですね。
意外に簡単で、なんなくIE6のデザイン表示の問題を解決できました。おすすめです。