- ベストアンサー
IEとFireFoxでの指定位置のズレに困っています
- IEとFireFoxでの指定位置のズレに悩んでいます。ポップアップ表示の位置が、IEとFireFoxで異なってしまいます。
- CSSとHTMLのコードを確認しましたが、問題は解決しませんでした。ネットで調べた方法も試しましたが、うまくいきませんでした。
- FireFoxで正しい位置にポップアップが表示されるようにするための方法について、ご教示いただけませんか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IEのスタイルシートの解釈には、いまだにバグがあります。そこで、あんなおかしな挙動になる。(あなたではなく、IEの動作はウソという意味) そこで、少しオーソドックスな書き方をします。 具体的にどこに表示したいかの補足がないので、親コンテナブロックの上から99%に指定してあります。top:-240pxとかでもよいですから、任意に変更すること。 ・基本はabsoluteは、その親コンテナブロックがstatic以外だと、親コンテナブロックに対して、絶対配置される。 ・動的な疑似クラスは、古いブラウザだとA要素にしか働かないので、a要素に適用する。 が基本にります。 【参考資料】 5.11.2 リンクに関する疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#link-pseudo-classes ) 5.11.3 動的な疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#dynamic-pseudo-classes ) 9.3.1 配置体系を選択する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position ) ★その前に、HTML自体が正しくないとなりません。【最も重要な基本です】 これができてないと、ややこしくなるし、どう逆立ちしても無理になる。 今回は、(htmlに対するリンクなので)ナビゲーションリストで、画像で示していると解釈して次のようなマークアップがされているとします。(あなたのHTMLでは無理なのもありますし。) 下記HTMLだと、スタイルシートを解釈しないユーザーエージェントはむろん、スタイルシートを正しく理解できないユーザーエージェントはスタイルシートを解除することで閲覧に支障がないでしょう。大きな画像が表示されると邪魔・・ ・・・・・・・・・・下記はタブを全角スペースで置き換えてあります。・・・・・・・・・・ ・・・・・・・・・・画像はいずれも./images/にあるものとします。・・・・・・・・・・ ・・・・・・・・・・画像、リンク先ファイル名は変えてあります。・・・・・・・・・・ <ol class="imageList"> <li> <a href="page1.html"> <img width="103" height="111" src="../images/image1.jpg" alt="犬"> <span style="height:243px;width:260px;background-image:url(../images/1.gif)"><span>犬の写真へ</span></span> </a> </li> <li> <a href="page2.html"> <img width="103" height="111" src="../images/image2.jpg" alt="猫"> <span style="height:243px;width:260px;background-image:url(../images/2.gif)"><span>猫の写真へ</span></span> </a> </li> </ol> 注意) <span>犬の写真へ</span>,<span>猫の写真へ</span>の部分は、 <span><img src="透明な画像" height="10" width="10" alt="犬の写真">の方がよいかも・・・ そうすると、スタイルシートの ol.imageList a:hover span span, ol.imageList a:focus span span, ol.imageList a:active span span {display:none;} が不要になる。 ★ポップアップ時の画像のサイズが異なるときは、位置を個別にHTML内で指定するとよい <span style="height:243px;width:260px;background-image:url(../images/2.gif)"> で指定する。 <span style="height:243px;width:260px;background-image:url(../images/2.gif);top:-200px;"> ☆Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ☆W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 ★ブラウザ(IE8,firefox,safari,googlechrome)は、同じ位置に表示される。 ★Operaは、position:absoluteに対応していないためおかしな位置に表示されます。 ＿＿＿＿＿＿＿＿ここから全ソース(HTNK4.01strict/厳密型) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{ margin:0px;padding:0px;background-color:rgb(200,200,200); } body>div{ width:60%;min-width:500px; max-width:800px;margin-left:auto;margin-right:auto; background-color:white;padding:10px;border:none; } /* ここから */ ol.imageList{ display:block; margin-left:0px; padding-left:0px; } ol.imageList li{ display:inline-block; margin-left:0px; margin-right: 10px; padding:0px; list-style: none; border:solid 1px blue; position: relative; } ol.imageList a img{border:none;} ol.imageList a span{ display:none; position:absolute; z-index: 2; border: 1px red solid; text-decoration: none; /* ホーバー時のpopup画像の位置指定 */ top:99%; left:-10px; } ol.imageList a:focus span, ol.imageList a:hover span{ display:block; border: 1px red solid; } ol.imageList a:active span{ display:block; border-color:green; } ol.imageList a:hover span span, ol.imageList a:focus span span, ol.imageList a:active span span {display:none;} --> </style> </head> <body> <div> <h1>サンプル</h1> <p>ブラウザの横幅を変更しても、太郎<span class="rub" style="left:-4em">(たろう</span>内容が左右真中に表示されています</p> <p class="test">こんな感じです。幅60％、ウィンドウ幅を変えると、ウィンドウ幅によって最小500px、最大800px内で変化する。</p> <ol class="imageList"> <li> <a href="page1.html"> <img width="103" height="111" src="../images/image1.jpg" alt="犬"> <span style="height:243px;width:260px;background-image:url(../images/1.gif)"><span>犬の写真</span></span> </a> </li> <li> <a href="page2.html"> <img width="103" height="111" src="../images/image2.jpg" alt="猫"> <span style="height:243px;width:260px;background-image:url(../images/2.gif)"><span>猫の写真</span></span> </a> </li> </ol> </div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Operaでは、:hoverに反応しない。クリックしたら反応する。 Safari、firefox、GoogleChromeは同じ挙動 IEのみ、違う場所に出る。 どの位置に出したいのでしょう。スタイルシートを読む限り、IEの挙動はウソだね。
補足
すいません、ウソをついて何になるんですカ？(T-T) ええと、今ホームページビルダー１１でウェブサイト作ってます。 そしてブラウザ確認はIEとFireFoxでのみやってるんですが、ビルダーで確認した位置とIEでの表示はピッタンコ合うんですが、FireFoxで見ると・・・どーーーーーっしてもIEよりも上（ずいぶんズレた上）に表示されるんですよ。 今も別件で背景画像をスタイルシートで水平方向に何％垂直方向に何％と指定したんですが、IEで確認すると狙い通りに位置してるんですけど、FireFoxだと画像の半分から上が画面外に飛び出す程上にズレてるんです。 FireFoxのブラウザ内で一体どこの位置が基準になってるのか不思議でしょうがありません。 お手上げです。
お礼
ぁぁあああああ、ありがとうございます！！！ なんかとっても詳しく書いてくれてる（ΩДΩ） ここで質問したのは2回目なんですが、こんなに親切に教えてくれる人が居るとは思いませんでした！ お忙しい中時間をさいていただき深く感謝します！！！ はぁ～やっと地獄から解放されるんですねっ！！嬉しい♪ 取り掛かりたい気マンマンですが、子供を風呂に入れなければ。 夜中に起きて頑張ってみます。 本当にありがとうございました！！