読書SNSの本棚のタブメニューがIE８で表示バグ。いや、気づいてたんだけど、IEなんてもうイラね、と放置。

タブメニューが４つほどあって、その各々でやることが違う＝コンテンツ量が違うので、コンテンツ部分のdiv要素の高さが違う。

これをjavascriptで display:block noneを切り替えるわけだが。

FireFox、Safari、IE7は意図どおり、コンテンツ部分の高さに合わせて、親要素の高さを広げてくれるんだけど、IE8はコンテンツ部分の高さを広げてくれない。ケイ囲み（親要素）からべろ～んとコンテンツがはみ出してみっともないったらありゃしない。floatした子要素の高さを親要素に伝えるためのハックをスタイルシートには適用してあるんだけど、なんでやねん、と。ごそごそスタイルシートをいじったりHTMLに直接styleを埋め込んでみても、ちっともいうことを聞きやがらず、すっかり放置だった。

朝から団地の掃除、イトーヨカドーの特売、と地域密着活動の合間を縫って、見直してみた。結果。

javascriptで切り替えるときに、親要素もいじれば意図どおりになった。

id.style.display=’none’

id..parentNode.style.display=’none’

id..parentNode.style.display=’block’

id.style.display=’block’

IE8はけっこうまともという話なので、本来こうすべきところ、なのかな。

ちなみに、

こんなのヘッダに入れると強制的にIE7互換表示モードにしてくれるんだけど、このIE７互換がいい加減っぽくて、本当のIE7と表示が違ってたりするんで困ったちゃんでした。

『CSS3　スタンダード・デザインガイド』

エ・ビスコム・テック・ラボ

[更新]2026-02-04 09:15:41