June 20, 2005
Internet Explorer 周りの CSS 制御
とりあえず現行バージョンのすべてのブラウザで問題なく見れるようになった。
Win IE 用に取った対策としては、PNG 透過を使用している部分の画像を新たに JPEG/GIF に変更し、グラデーションの背景は使わない方向で決めたら、あとは CSS の設定を変えるだけで済んだので、結局のところ修正にかかった時間は半日ってところ。
Mac IE に関しては、PNG フォーマットがサポートされていたのでもっと簡単だった。邪魔してる部分の値をコメントアウトするだけで済んだから。
もともと Safari や Firefox では表示に問題はなかったので、つまり IE 周りの制御方法がきちんとできれば良いのだから、その辺を検索してみたら大変分かり易い記事を見つけることができた。
忘れないうちに自分用にメモ。
[参考]
- "そろそろIEをはじくCSSも整理しておきますか" - できる！CSSを使いこなす
- "CSS, Way to go! _SETUP" - 『Web Designing』2004年11月号
具体的にやってみた CSS でのコントロールは以下ような感じ。
1. Mac IE のみに別の値を適応させる（サンプル）
// コメントの終了サイン"*/"をエスケープ"\"することにより、それ以降の記述を読み込ませないようにすることが可能。この場合次のコメント終了サインまでを Mac IE は認識しない。
// 記述例：
P {
/*ココからの値をMac IEは認識しない\*/
color: #FF7171;
/*ココまでの値をMac IEは認識しない*/
}
2. Win IE のみに別の値を適応させる（サンプル）
// Win IE 以外のブラウザは "!important" の記述がある特定の値を優先して認識するが、Win IE は未対応のために、それ以降に別の値を記述し、これを上書きする。
// 記述例：
P {
color: #8F1849 !important;
color: #333333;
}
3. Win IE & Mac IE のみに特定の CSS 設定を適応させる（サンプル）
// htmlを子孫セレクタとして、半角スペースで区切って先頭にアスタリスクマーク"*"を付けた場合、Win/Mac IE 以外のブラウザはこの設定を読み込まない。
// 記述例：
div {
background-color: #8F1849;
}
* html div {
background-color: #CCCCCC;
}
4. Win IE に特定の CSS 設定を適応させない（サンプル）
// ">"サインで示す子セレクタを Win IE は読み込まない。
// 記述例：
html>body div {
background-color: #FF7171;
}
5. Win IE のみに特定の CSS 設定を適用させる（サンプル）
// 上記をふまえると、コメント終了サインをエスケープすることでまず Mac IE を除外し、Win/Mac IE のみに特定の CSS 設定を認識させる方法を使うことで Win IE のみに CSS 設定を読み込ませることができる。
// 記述例：
html>body div {
background-color: #FF7171;
}
/*ココからの値をMac IEは認識しない\*/
* html div {
background-color: #CCCCCC;
}
/*ココからの値をMac IEは認識しない*/
2 と 5 にあまり違いはないけど、一応値のみ変更したい場合と、セレクタ（クラス）全体を変更したい場合とで分けてみた。まぁ組み合わせれば他にもいろいろとできるだろうけど一応今回使った組み合わせを後々のためにも記録。
投稿者 elektr0pank : 2005年06月20日 00:07
トラックバック
このエントリーのトラックバックURL:
http://www.f9k-a.com/cgi-bin/MT/mt-tb.cgi/44
コメント