株式会社イグニス

マルチブラウザ対応でサイト構築をするとき、正しい構文でXHTMLやCSSを書いていれば、ある程度ブラウザに依存しないサイトができるのですが、まだまだIE6のシェアが多い昨今において、“正しいだけ”では思ったような表示ができないのも事実。そんなときに活躍するのが「CSSハック」。その中で今回は最もシェアが高いIE6のバグを回避する際にあてるもの。
IE6はCSSを正しく解釈してくれないバグが多いブラウザで有名なのですが、その中で子供セレクタ(「>」)を理解できないのを利用します。

.cont h2.class{
/*ここはIE6用を記述*/
color: red;
}
.cont>h2.class{
/*それ以外のモダンブラウザ(IE7やFireFoxなど)で書き換えたい内容を記述*/
color: blue;
}

（上記はサンプルですので、通常このように利用することはありませんが、）IE6では子供セレクタを読み込まないため、青に上書きされず赤のまま残り、それ以外のモダンブラウザだと、青で上書きされるため青が表示されます。

Popularity: 10%

Posted on 2007/04/30 by koya
Filed under: メモ/データ, ブラウザ, CSS

最近とにかく制作案件が多く、特にデザイン関連よりもHTMLコーディングに追われる事が多い。今月に入って何ページHTMLコーディングを行ったのだろう。。

XHTML+CSSコーディングのノウハウもかなり溜まってきて、（この辺はいつか時間が出来たらまとめようと思いながらも、たぶん伸び伸びになるのだろう）今ではシンプルなソースで思い通りのレイアウトにする事は結構容易いのですが、常に考えるところがブラウザチェック。

≪現在のブラウジング環境≫
1.IE7(Sleipnir)[for Win]
2.Gecko/Mozilla(Sleipnir)[for Win]
3.Safari2.0.4[for Mac]
4.FireFox2[for Mac]
5.Opera9[for Mac]
6.MacIE4.7[for Mac]

■続きの内容：「ブラウザ確認便利ツールやブラウザシェアデータなど」

Popularity: 11%

Posted on 2007/03/14 by koya
Filed under: メモ/データ, ブラウザ