- 2006年10月18日 03:23
- html/css
今年の５月頃、あるページデザインを Web 標準に準拠させようと Windows の IE6 , Firefox , Netscape , Opera で検証した後、Mac で Safari , Firefox , IE5 と検証した結果、Mac IE5 だけ表示がおかしい・・・。コンテンツ全体をセンタリングしているはずがされていない。仕方なくスタイルシートの値をいろいろ変えてみるが全く効果は無かった。
上の件で Mac IE5 への対応を断念していたが、隣の研究室の彼の机に Mac が設置されていることを知り、その Mac を借りてもう一度チャレンジしてみることにした。しかし、思いつく限りいじってみるが変化なし。最後、半分やけになって内容を70%ほどカットしてみると、他のブラウザと明らかに違っている点に気づいた。そう、最初から Mac IE5 で表示されたレイアウトは 1px たりとも動いていなかったのだ。この「CSS いじっても微動だにしない」事件は Mac IE5 のキャッシュの更新を「常に」にしていなかったために、最初に読み込んだスタイルシートをキャッシュに取り込んだ後、更新されたはずのスタイルシートは適応されていなかった、というのが主な要因だった。
こうしてスタイルシートが正しく適応されるようになったおかげで、センタリングされなかった理由も見つけることが出来た。詳しくは以下参照。
例えば下のような HTML をセンタリングする場合、
<body>
<div id="container">
コンテンツ
</div>
</body>スタイルシートを以下のようにしてはいけない。
body{
margin : 0px;
padding : 0px;
text-align : center;
}
#container{
position :relative;
width : 500px;
margin : 0px auto;
padding : 0px;
overflow : hidden;
}#container をコンテンツした場合、「overflow: hidden」を使用しなければセンタリング可能？らしいので、Mac IE5 でセンタリングする場合は「overflow: hidden」に気をつけなければ！
- Newer: WYSIWYGを使ったWebアプリケーション
- Older: Google Image Labeler
