人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

IE のみで画像ファイルが縦方向に4pxずれてしまいます。

以下のサイトのトップページなのですが、マウスが画像にオーバーするとその画像がフェードアウトしてその下にあるGoogle Map をはめ込んだ画像が表示されるような作りになっています。
http://devanne.firedictionary.com/

元の画像とGoogle Map をはめ込んだ画像を同じ位置に表示したいのですが、IEでのみ4pxずれてしまいます。
画像を重ねるために、DOMの順番で上から Google Map をはめ込んだ画像(Tableを使ってレイアウトしています)、元の画像の順にレイアウトし、元の画像の方には、マイナスマージンを与えるという方法で重ねています。

Google Map をはめ込んだ画像のテーブル高さと同じだけ、マイナスマージンをCSSで指定しています。
フェードの操作でJavaScriptを使用していますが、JavaScriptで画像自体の位置を動かすような処理は全くしていません。

ネットでいろいろ調べてみたのですが、どうしても理由を見つけることができませんでした。

どなたか、CSSを使ったデザインに詳しい方、教えていただけたら大変助かります。
宜しくお願いします。

●質問者: norisuke3
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS DOM Google IE JavaScript
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Lhankor_Mhy
●70ポイント ベストアンサー

これで正解かどうか自信ありませんが、以下の方法では直りませんか?

<img id="home_image" src="images/island.jpg">

↑を↓に変更

<img id="home_image" src="images/island.jpg" style="display:block">

なお、余計なお世話とは思いますが、フェードさせるスクリプトはjQueryを使うならスクラッチで書く必要はないと思います。

◎質問者からの返答

すごい。完璧っす。(超感激!!)

ありがとうございます!!

フェードのスクリプトは、最初jQueryで、mouseover と mouseout のイベントで書いてみたのですが、マウスをテーブルの各セルを超えるときに、各セルがmouseoutをバブリングしてしまって上手く行かなかったのでスクラッチから書いてみることにしました。

重ねてお礼申し上げます。


2 ● toki-2131
●0ポイント

右クリックしたら

◎質問者からの返答

右クリックしたら、どうなりますか?

質問の趣旨に有っていないようなので、不適切な回答として処理させていただきます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ