--.--
--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

08.28
Thu
CSSの解釈が独特で有名なIE・・・。
※IE7の解釈はわかりません。
IEでは、bodyにwidthプロパティを指定しても無視されます。
おかげさまで、僕のホムペは大惨事でした。

そこで、「IEでbodyにwidthプロパティを指定したとき無視される」の対策
調べた結果、どうやらbodyのすぐ下にdivで囲ってそこにwidthを指定するのが最善のようです。
そこで、スターハックを使います。
スターハックとは、指定する属性、IDの前に*htmlをつけることによって、IEのみに適応させることが出来るというテクニックです。
ハックとは、ブラウザ間で異なる解釈(主にIEですが)を逆に利用するテクニックのことを指します。
HTML
bodyのあとに、<div id="all">コンテンツ</div>を挿入します。

次に、IE用にスターハックを適応します。

CSS
body{
width:800px;
}
*html #all{
width:800px;
}
こうすればOKです。
bodyにwidthは消しても構いませんが、次世代ブラウザと呼ばれるブラウザには有効ですので、残しておきましょう。
CSSは上から順に上書きされるのでIEはスターハック側のwidthが適応されます。

重要
IEでは、ブラウザの画面全体がbodyであるといった解釈をします。
なので、border:1px solid #000000;と指定したとしてもブラウザの枠に沿うようにして黒い1ピクセルの線が表示されることになります。
この対策も先ほどお話したテクニックで直せます。
*html #all{
width:800px
border:1px solid #000000;
}
これでOKです。何か質問があれば分かる範囲で受け答えいたしますので、コメント欄でどうぞ。
IE6で確認しました。
どうやら、bodyに直接指定したCSSプロパティのwidthは反映されないようです。
これはIE6の仕様だそうです。また迷惑な。
W3Cでは、普通に反映されるようになってます。
IEはホムペ作ってる人にとっては天敵です!
僕はIEでチェックをしてないです。
えっ?最近ではちゃんとしてますよ。うん。
母親から「IEは一番シェア高いんだからちゃんとチェックしないとだめだよ!」と言われました。
以後気をつけます。
bodyにwidthを指定できない。の対策はbodyの直下にdivを押し込むしかないようです。
html全部直さないとだから辛い・・・。
嫌がらせに近いよね。
IEの独自解釈と戦う毎日です。
関連記事
comment 2
コメント
自分のところも見事に崩れてました。
参考にさせていただきますよ。
pon.s | 2008.08.30 21:19 | 編集
参考にしてください。また今度コメントしてくださいね!
たまのび | 2008.09.02 00:44 | 編集
管理者にだけ表示を許可する
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。