Subscribed unsubscribe Subscribe Subscribe

IE6のoverflow:hiddenとposition:relativeで起こるバグの解消

Javascript Web

タイトル通りですが、
jQueryとかを使って横にぬるぬるスライドするギャラリー的なものを作るときに、何となく頭の中で考えると
たぶん横に並べておいて、overflow:hiddenでマスクかけて、leftパラメータをいじってヌルヌル動かすんだろうなぁと想像する。



まぁだいたいそんな感じでできるわけだが、どうやらIE6では上手く表示されない。
いろいろ調べてみたら、IE6はoverflow:hiddenとposition:relativeを組み合わせると上手く表示できないようだ。


またかーとか思いながら、どうしようかなー、IE6だけ違う動作するscriptを書こうかなーとか考えていたんですが、
マイナスmarginで動かせば良いんですね!


なんか、マイナスmarginってクールなイメージがあったけど、本当にお前ってヤツはクールだよ。
というわけで、overflow:hidden + marginLeft: -width ( + position:static) という組み合わせで解決しましたー!


ちなみに、それぞれの場合で作った水平ぬるぬるスライドのサンプルへのリンクを載せておきます。
IE6で見てみてよー!


スライドしてぬるぬるするギャラリー(IE6非対応版)


スライドしてぬるぬるするギャラリー(IE6対応版)



参考:IEでoverflow:hidden;とposition:relative;の相性が悪いお話