- ベストアンサー
画像が少し下にずれる問題について
- CSS初心者がホームページ制作中に、Chromeで画像が下にずれる問題に遭遇しました。
- IEでは正しく表示されるのに、FirefoxやChromeではカーソルオーバー用の画像が下にずれて表示されます。
- 原因を特定できずに困っています。解決方法をご教示いただけると幸いです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そんな長くて煩雑だと・・・途中で読む気がうせてしまいました。すみません。 IEでのみ表示が違う原因で、最も多いのは互換モードでの動作です。--IEの解釈が間違っている-- HTMLを標準モードで起動するように書き換えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ・・・ 詳しくは、 DOCTYPE スイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.1480.11553.1.12817.18.15.2.0.0.0.682.3732.0j10j1j1j1j2.15.0...0.0.TUp2L8opvrs&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=d0414a132c82753&biw=1024&bih=619 ) など HTML5を目前とした今は、transitinalは過去の技術です。1999年のHTML4.01の勧告以来「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」といわれ続けてきたことですから。 HTMLを Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) などでチェックしながら、ウェブ標準にまず直してください。 それでスタイルシートを記述すれば、どのブラウザでも標準モードで起動し、ブラウザによる差は消えるでしょう。 なお、スタイルシートはHTMLが文書構造だけ記述してあれば、もっとシンプルに簡単になるし、わかりやすくなります。 昨日回答した (CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7464353.html ) なんて、HTMLは極めて簡単で、スタイルシートもわかりやすいかと。 たぶん、あなたの期待されていることをHTMLさえ正しければ・・・HTMLは半分、スタイルシートは1/10で済むと思います。 ★継承されるプロパティは、一度しか書かない ★同じ設定をする要素はグループ化する。 ★デザインのためにidやclassは書かない これだけで、随分とスリムになりメンテナンスも容易になります。 「例」 (CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7464353.html ) 具体的には、HTMLは <div class="nav"> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> だけでよいのです。
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
＞ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや ＞Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 間違っているのはIEだね・・・（IEのバージョンにもよる） ＞多分、無駄なコードがいっぱいありそう・・・） ですね・・・ 半分以下に簡素化できますよ。 まずは、#1さんの通りDTD標準準拠に変更 作り直した方が後々の問題を回避できるけど、 とりあえずの応急処置なら、 #g_navi li a{ padding-top : 20px; #g_navi ul li a:hover{ height : 80px; 実際の画像サイズが不明なので、良くわからないが、 この部分の高さが矛盾なのでは？ 計算上では、21px程度のズレかな・・・ 何故、a:hoverの時だけ height : 80px; なのかな？？？
お礼
わかりづらい、内容にも関わらず、回答していただいて ありがとうございました。 問題点は、標準モードに切り替えることでクリアできました。 ご指摘の・・・ #g_navi li a{ padding-top : 20px は、テキスト文字（「ご案内」等）が、垂直の中央にこさせるために 入れてます。 #g_navi ul li a:hover{ height : 80px の件ですが、これを入れないと、画像が切れて表示されてしまうのです。 ナビのベースの画像の高さが80px、ロールオーバー用の画像の高さは80pxです。 表示させたい位置は、縦横間でセンターなのですが 80pxの指定を入れないと、ナビの「ご案内」等のテキスト部分にしか画像が反映されず、 そこからはみ出している画像部分は切れてしまうのです。 もっと、知識＆技能があれば解決する問題なのでしょうが＞＿＜； ご指摘ありがとうございました。
お礼
とても丁寧な回答、ありがとうございました。 わかりづらいCSSながらも、解説していただいてとても助かりました。 おっしゃる通り、標準モードに切り替えることで、今回の問題は解決しました。 多分、スタイルシートやhtmlの知識が、不充分なのが一番原因なんですよね。 今後は、教えて頂いたサイトと、別で回答されている内容を参考に スタイルシートとhtmlの簡素化を目指して、文書構造もきれいな ＨＰを作っていきたいと思います。