IEでoverflow:hidden;とposition:relative;の相性が悪いお話
2009.03.17 Author: Jas
JavaScriptを使って座標を指定し、画像の表示位置を自由に変化させるサイトは結構あると思います。
ところが、XHTML形式でhtmlを記述している場合だと、overflow:hiddenを指定したボックス内にposition:relativeやposition:absoluteで座標を指定した画像などを配置しても、ボックスからはみ出した部分が隠れずにすべて表示されてしまいました。
これはどうやらIEの仕様らしく、overflow:hiddenを有効にするためには、中に表示するものをpoosition:staticにしなければいけないようです。
でも、position:staticにすると座標を指定して表示することができません。
今回は、このような場合にどうやって対処すればいいか紹介します。
以下に2種類の方法で画像の表示位置を移動できるサンプルを表示します。
上側のサンプルはposition:relative; を指定し、下側のサンプルはposition:static; を指定しています。
Firefoxでは両方とも同じ表示で、同じ動作をするかと思います。
IEの場合は上のサンプルではoverflow:hiddenが聞いておらず、猫の画像が全部表示されてしまっているのではないでしょうか。
どうやってposition:static; を指定して画像の表示位置を変化させているのでしょうか。
答えはとても簡単です。
座標を指定しているのではなく、画像を配置しているボックスの左マージンを増減させて、画像の表示位置が変わったように見せかけているのです。
var container = document.getElementById('container');
// 座標指定の場合
container.style.left = (container.style.left.replace('px', '') - 20) + 'px';
// マージン指定の場合
container.style.marginLeft = (container.style.marginLeft.replace('px', '') - 20) + 'px';
たわばがにさん曰く「押してダメなら引いてみろ！」
プログラムがうまく動作しないときは、逆転の発想が重要ですね。
