IE6でiframeを使うときに注意すること

CSS

IE6とiframeというもうあまり使わなそうなこの2つですが、あることをしてしまうとiframe内のコンテンツがまったく表示されない現象があったので、その解決方法を調べました。

DD_belatedPNG.jsを使用すると表示されなくなる

いろいろ調べた結果、原因はiframe内のコンテンツに透過PNGを使うためのjs、DD_belatedPNG.jsでした。
IE6ではiframe内のコンテンツでDD_belatedPNG.jsを使用するとiframe内のものが表示されないことがあります。

参考ページ

解決方法

上記の参考サイトにも書いてありますが、iframeにposition: relative;を指定すると表示されるようになります。

/*-- iframeに適用 --*/
iframe {
position: relative;
}
PNGをSVGにして再配置する際に、基準となる要素を明示してあげる必要がある。(らしい) IE6乙!

ただ自分が確認したところ、そのpng画像がオンマウスで画像が変わるときにまた表示されなくなってしまったので、以下のようにしたら治りました。

/*-- iframe内のページに適用 --*/
body {
position: relative;
}

IE6でjsで動的にiframe内の表示を変えるときの注意

iframe内のコンテンツを動的に変えるとき、IE6ではiframe内に表示されるコンテンツの最大の高さのまま遷移してしまうことがありました。(iframeの高さが伸び縮みしない)

これはiframe内コンテンツのbodyにheight: 100%;が指定されているとなりました。ですので、こういう場合はiframe内コンテンツにつけないようにしましょう。

body {
height: 100%; ←これをつけない
}