- ベストアンサー
xhtmlでページを作ったらcssのhoverの部分がFirefoxで
- xhtmlでページを作ったらcssのhoverの部分がFirefoxでは動くのにIEでは上手く動きません。
- どうしたらいいのでしょうか？
- --xhtml-- <div class="menu"> <ul> <li><a href="#"target="content">link1</a><br/></li> <li><a href="#"target="content">link2</a><br/></li> <li><a href="#"target="content">link3</a><br/></li> </ul> </div> --css-- .menu{ width:100%; position:absolute; bottom:25%; font-weight:bolder; filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; } .menu ul{ margin:0; padding:0; } .menu li{ margin-bottom:1px; list-style-type:none; float:none; font-size:1.3em; line-height:0; } .menu li a{ display:block; width:100%; line-height:25px; background-color:#ba2029; color:#ffffff; text-align:center; text-decoration:none; border-left:solid 10px #880000; } .menu li a:hover{ background-color:#95195a; }
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ようやくソースを確認できる環境にもどってきたので、 あらためてソースを見てみたところ、hoverの件は、 filter: alpha(opacity=70);が原因のようですね。 .menu *{ filter: alpha(opacity=70); } や、 .menu li a:hover{ background-color:#95195a; filter: alpha(opacity=70); } などで色を変化させるすべてのクラスに透明度を指定しなおさないと、 IEで色が固定になってしまうようです。
その他の回答 (2)
- kuzumiHK
- ベストアンサー率72% (132/183)
行頭にXML宣言を入れると、 IEで、互換モードになってしまうバグがあります。 IEを動作保証環境に含めるなら、本末転倒ではありますが、 XML宣言を入れない作りにしなければなりません。 個人的には今後の流れも含めて、XMLでなければならない理由が特になければHTML5がつかえるようになるまでは、HTML4.01でつくつておくことを、おすすめします。 上記をはずしてもなおらないときは、 IEハツクなどを使って、liタグをIEだけdisplay:inlineしてみてください。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
僕の環境では IE8 で問題なく表示できますが？ XHTML は正しい書式ですか？念の為一度チェックしてみてはいかがでしょう。 （ちなみにアンカータグの後ろの改行は意味が無いと思うのですが…） <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>SAMPLE</title> <style type="text/css"> .menu{ width:100%; position:absolute; bottom:25%; font-weight:bolder; filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; } .menu ul{ margin:0; padding:0; } .menu li{ margin-bottom:1px; list-style-type:none; float:none; font-size:1.3em; line-height:0; } .menu li a{ display:block; width:100%; line-height:25px; background-color:#ba2029; color:#ffffff; text-align:center; text-decoration:none; border-left:solid 10px #880000; } .menu li a:hover{ background-color:#95195a; } </style> </head> <body> <div class="menu"> <ul> <li><a href="#"target="content">link1</a></li> <li><a href="#"target="content">link2</a></li> <li><a href="#"target="content">link3</a></li> </ul> </div> </body> </html>
補足
回答ありがとうございます。 すみません。説明不足でした。 ActiveXを許可する前は動作してくれるのですが、ActiveXを許可するとhoverの所がactiveの様な動作をしてしまうのです。 改行タグについてのご指摘ありがとうございます。確かに必要無いですね。
お礼
回答ありがとうございます。返答が遅くなって申し訳ありません。 filter: alpha(opacity=70);が原因だったんですね。 おかげで正常に動いてくれました。 XML宣言の事についても勉強になりました。 本当にありがとうございます。