Lepracaun's factory - レプラコーンファクトリー -: 画像拡大スクリプト「FancyZoom」でレイアウトが崩れる件

« フォントシンボルのライブラリ共有化 | メイン | 第3回大阪IT飲み会に参加してまいりました。 »

2008年4月29日

画像拡大スクリプト「FancyZoom」でレイアウトが崩れる件

先日の記事『シンプルな画像拡大スクリプト「FancyZoom」』で紹介した「FancyZoom」ですが、IEで自分のブログを見たら、ヘッダー部分のレイアウトが崩れていました。

私は普段、Firefoxを使用しているため、IEのチェックが怠りがちで、レイアウト崩れやJavascriptのバグに気づかないことが多々あります。本当は最低でもIE6、IE7、Firefox、Safariあたりはチェックしなくちゃいけないんですけどね。

今回もまさにそのケース。
原因は「FancyZoom」が、bodyタグの直下にdivとtableをひそかに追加しているため。

私のブログの場合、コンテンツ領域をdiv#containerにmargin-top:30pxを指定していました。
「FancyZoom」が追加したdivの高さやポジションの指定のせいで、隣接する要素がうまく取得できず、マージンを取れなかったのが原因です。

Firefoxの拡張「Firebug」を使って判明。

div#ZoomSpin、div#ZoomBox、div#ZoomCapDiv、div#ShadowBoxという4つのdivに加えて、div#ZoomCapDiv、div#ShadowBoxの中にはtableが追加されています。

こんなときFirebugは便利ですね。
IEにも同様の機能と称する「DebugBar」っていうのがあるんですけど、DOMのツリー表示はできるものの、現時点のバージョンV5.0.2では要素の編集まではできません。
その上、幅の狭いサイドバーに表示されるので、ソースコードが非常に見づらい。しかもなぜか、タグが大文字に変換されていますし・・・
ただ、Javascriptのソース表示はありがたいですね。

同じくDOMツリーを表示して、なおかつ要素の編集機能があるのが「Internet Explorer Developer Toolbar」。マイクロソフト純正です。
CSSのプロパティやHTMLの要素を削除したり追加したりと・・・いわゆるデバッギングにはこちらのほうが便利。

話が逸れましたが、結局強引に自分とこのCSSを修正して緊急対応しました。
marginで余白を取れないため、paddingで余白を取るという、いかにも素人っぽい解決方法。
しかし、いろいろ試したものの、IEで「FancyZoom」によるレイアウト崩れを直す方法が見つかりませんでした。
また、追々調査していこうと思います。

投稿者 lepracaun : 2008年4月29日 11:55