MacIE5 overflow:hidden と ポジショニング
このサイトのレイアウトをちゃんとしたいのに制作管理しているコンテンツがあるサイトのリニューアル作業がありブラウザ毎のチェックをするために日曜自主出勤。記述はすでにスタンダードモードになっているものなので Apple の Safari とFirefox、それに Windows の IE 6 、Opera 7、Firefox で確認後、旧仕様の Windows IE5.0 と 5.5 に フィルターを使って別シートをリンクした。
仕様は HTML4.01 Transitional なのでそこまでやらなくてもいいのだけど、もとネタはヘッダのメニューでエリアマップを使っており、それが気に入らないので ul リストに変えてポジショニングで絶対配置するという近年まれにみる真面目なコーディングをしてみた。ウインドウズの IE がなかなかいうことをきかないのはもう慣れたけど、マックの IE で relative ブロックのマージンを 0 auto にしてセンタリングができないことにハマった。
マック IE はスタンダードモードで動作している状態で、他のブロックはちゃんとセンタリングしてくれるのに、なぜかヘッダだけ左よせになる。他のブロックとの違いは position:relative であることくらいなので、それをとっぱらったりしたのにダメ。そういうときはどうするかというと、そこの指定を全部とっぱらって問題ある指定を見つけ出す。
結果、そのブロックのサイズは本来収まらないリストがずらりと並んでいて height 固定で overflow:hidden をかませていた。それがアウト。
マック IE で overflow:hidden を使うのはよくよく気をつけないと、要素によって内容が全部消えてしまうことがあるのは知っていたのだけど DIV ブロックは普通なら大丈夫だと理解していたため、それが原因だとなかなか気づかなかった overflow:hidden するとセンタリングしない、というよりむしろ「内容自体は消えないけれど、そのブロック用に記述した設定を隠してしまう」ということじゃないんだろうか。
そういうわけで overflow:hidden を使うときは MacIE にきをつけましょう。
div#top {
position:relative;
top: 0;
width:740px;
height:60px;
margin:0 auto;
padding:0;
overflow:hidden;
}上記だと MacIE5 でセンタリングしません。
2004年11月07日 17:01 | CSS | ichiro
