ロールオーバーの挙動がおかしい

2011/09/01 16:41

このQ&Aのポイント

IE8で、特定のボタンだけロールオーバーが枠にしか反応しない問題が発生しています。
この問題は、他のボタンでは正常に動作しているにもかかわらず、この特定のボタンだけで発生します。
IE8のエラー回避方法を教えてください。

romiromi
お礼率85% (120/141)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/02 10:35 回答No.2

ウィンドウを開くためだけにformは使わない。単純に <div class="menue"> 　<ul> 　　<li><a href="" onClick="window.open('地図.html','_blank','scrollbars=no,width=550,height=500'); return false;"></a></li> 　　<li><a href=""></a></li> 　　<li><a href=""></a></li> 　</ul> </div> だけでよい。びっくりするほど簡単なHTMLでしょ。そして、なによりもjavascriptやスタイルシートを読まないユーザーエージェント(携帯電話・読み上げソフト・検索エンジンなど）にも情報が伝えられる。HTMLは文書構造にしたがって正しくマークアップすること。　その上でスタイルシートで好きなようにデザインすれば良いです。スタイルシートも簡単になります。 div.menue{position:relative;} div.menue ul,div.menue ul li{display:block;list-style:none;margin:0;padding:0;} div.menue ul li a{ display:block;width:100%;height:100%; text-align: center;text-decoration:none; border:outset 6px #55bcb8; } div.menue ul li{position:absolute;width:200px;height:80px;line-height:80px;top:5px;left:10px;} div.menue ul li+li{top:5px;left:240px;} div.menue ul li+li+li{top:5px;left:460px;} div.menue ul li a:hover{background-color:yellow;} div.menue ul li a:active{border-style:inset;background-color:red;} とかでよいです。後方互換を考慮するならliにclass名をつけるとかしてください。補足) borderは色を指定するとoutset,insetは周囲すべて適当に配色してくれます。補足) 同じプロパティは重複して書かない。書くのもメンテナンスも大変。必要なものだけ上書き　　　詳細度や登場する順番、継承の有無など、カスケーディングの仕組みを理解しましょう。　　　　そのためのカスケーディングスタイルシートですからね。【一番重要な仕組み】補足) スタイルシートやjavascriptを外しても動作できること ★下記ソース中、タブは＿に置換してあるので、タブに戻すこと。 ☆HTML4.01strictで書かれています。　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　でチェック済み ☆CSSは2.1です。　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　でチェック済み <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="menue"> ＿＿<ul> ＿＿＿<li><a href="" onClick="window.open('地図.html','_blank','scrollbars=no,width=550,height=500'); return false;">地図１</a></li> ＿＿＿<li><a href="">地図２</a></li> ＿＿＿<li><a href="">地図３</a></li> ＿＿</ul> </div> </body> </html>

質問者

お礼 2011/09/02 12:00

ご丁寧にありがとうございます。正しくコーディングするところから改めないといけないと痛感しました、勉強になりました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

naokita
ベストアンサー率57% (1008/1745)

2011/09/01 23:09 回答No.1

input にする理由ああるのかな？過去互換モードだと無理かな・・・ IE6では、　:hover　も　a:hover にしか対応しないからね。 -------------------- .button2 　と　.button2:hover　の重複は不要。ショートハンドも絡めて省略可能。 left bottom repeat-x;　これは何の為？

質問者