こんぱすコーチの全方位日記

専門的な話ばかりですみません。昨日の続きです。

さてWebの世界での趨勢は、
「CSSを使ったレイアウト」が主流になってきたのは、
昨日書いたとおりで、僕も今取り組んでいるWebコンテンツは、
すべてCSSでレイアウトを行う流儀で進めてきているのですが、
ここでちょっと困った問題が起こりました。

実は、Webブラウザのバージョンによって、
CSSに書かれてある書式設定値の解釈が異なるんです。

解釈が違うとどうなるか。
それは「レイアウトが違う」という影響につながります。
しかも始末に悪いのが、
同じ「インターネット・エクスプローラ（IE）」なのに、
バージョンによって見え方が違うんです。

＜IE7（インターネット・エクスプローラ Ver.7.0）＞


＜IE6（インターネット・エクスプローラ Ver.6.0）＞


いかがですか？
IE7で見るとまともなのに、
IE6で見ると、メインコンテンツの部分が
ヘッダーに対して右へビニョーンと突き出していますよね。

これは、IE6がCSSの設定を正しく読み取ってくれない、
いわゆる「バグ」（プログラム不良）だからなのです。

崩れてしまっている部分のCSSをひもとくと…



上図の「.mMenu」が左段のレイアウト、「.sMenu」が右段のレイアウトを
つかさどっているのですが、
それぞれの中に「margin:」という項目がありますね。
赤色の下線にあるように、
.mMenuは左右のマージンを40ピクセル、
.sMenuは左右のマージンを10ピクセルとすることが設定されています。

ところがIE6は、この数値を倍にしてとらえるんです。つまり、
.mMenuの左右マージンは80ピクセル、
.sMenuの左右マージンは20ピクセルの設定になり、
それで結果的に右側へ伸びてしまう結果になるんですね。

＜IE6がCSSを間違って解釈するカラクリ＞
図をクリックすると、拡大表示します。


「数値を倍にとらえるのであれば、それを見越して半分にすれば…？」
という発想が出てくるのですが、
そうすれば今度はIE7で見たときに左へ縮んでしまいます。
いわば「あちらを立てればこちらが立たず」と言う状態になるんです。

「IE6で見た時だけ、元々の設定数値を半分にする」
ことが実現できれば、この不具合を正すことができるわけですが、
そんな都合の良いやり方があるのか？

実はあるんです



上図の赤枠内のように、冒頭に「* html」を付けると、
「これはIE6以下のブラウザだけが受け付ける」という意味になります。

IE7だとこの記述は無視し、
IE6だと一度「.mMenu」や「.sMenu」を読んだ上、
「* html .mMenu」や「* html .sMenu」を読み込む、
という流れになり、結果的にIE7とIE6での読み替えが成立して、
どちらのブラウザで見ても同じ結果になるんです。
これを「ハック」というそうです。

＜CSSをハックした後にIE6で表示したWebコンテンツ＞


CSSでレイアウトするのは、
やればやるほど奥が深いですねぇ



世界の「最先端」事例に学ぶCSSベスト・プラクティス