Home > Archives > 2006年10月18日 Archive

2006年10月18日 Archive

Mac IE5 のキャッシュについて

Posted by: non
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 のキャッシュの更新を「常に」にしていなかったために、最初に読み込んだスタイルシートをキャッシュに取り込んだ後、更新されたはずのスタイルシートは適応されていなかった、というのが主な要因だった。

　こうしてスタイルシートが正しく適応されるようになったおかげで、センタリングされなかった理由も見つけることが出来た。詳しくは以下参照。

MacIE5 overflow:hidden とポジショニング
from The Trap of Web Design

　例えば下のような 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」に気をつけなければ！