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


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

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

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

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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/03/08 10:32:56
  • 終了:2011/03/09 00:40:10

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/03/08 13:52:48

ポイント70pt

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

 

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

 ↑を↓に変更

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

 

 

 

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

id:norisuke3

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

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

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

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

2011/03/09 00:36:53

その他の回答(1件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/03/08 13:52:48ここでベストアンサー

ポイント70pt

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

 

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

 ↑を↓に変更

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

 

 

 

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

id:norisuke3

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

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

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

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

2011/03/09 00:36:53
id:toki-2131 No.2

toki-2131回答回数138ベストアンサー獲得回数12011/03/08 18:36:17

右クリックしたら

id:norisuke3

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

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

2011/03/09 00:37:36
  • id:feeds
    パッと見なのでIEでの細かな検証ができてませんのでヒント程度に。

    まず、根本的なとこ。主題とは関係ないところだとは思いますが。
    import_basic.cssのファイルの内部文字コードがsjisなので
    importされているbase.cssのfont-familyプロパティの日本語がブラウザ解釈後文字化けしている。
    ---
    現状で、ちょっと構造的にあまり良い作りではないですが・・・
    画像のデフォルトの位置は margin-top:-722px。
    パッと見、jQueryの動きとしては
    フェードインする時にdisplay:noneとなり消えるが、
    フェードアウトする時に-722px上にずらした位置に表示しようとする。
    (元の位置に表示)

    結局-722px上 の位置がIEでは"その位置"になる。
    IEのターゲットバージョンがわからないですが、
    IEだけハックで4pxずらした値で設定するとか。
    http://www.google.co.jp/search?q=IE%81@CSS
    IE6での値はmargin-top:-736px;でズレがとれましたが。

    たぶん親ののボックスの高さがフェードインで変わってるんじゃないかな・・・

    ちなみにIE6だとメニュー周りがダダ崩れでした。
  • id:norisuke3
    feeds さん
    コメントありがとうございます。
    css ファイルの文字コード気がついてなかったので助かりました。

    問題自体は、Lhankor_Mhy が指摘してくれたように、img タグに style="display:block" 属性を付けることで解決しました。

    IE6のエンジンで確認してみましたが、確かにタグがダダ崩れですね。
    IE6の日本でのシェアがだいぶ下がっているようなので(10.3%)、IE6は無視する方向で今回は進めてます。
    IE6、早く完全に消えてくれるといいんですけどね。

    いろいろありがとうございました!!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません