ホームページ > 記事 > ウェブフロントエンド > シンプルなメニューは Firefox では問題なく動作しますが、IE_html/css_WEB-ITnose ではクリックが乱雑になります。
シンプルなメニューは Firefox では問題なく動作しますが、IE_html/css_WEB-ITnose ではクリックが乱雑になります。
- WBOYオリジナル
- 2016-06-24 12:16:53846ブラウズ
私はフロントエンド開発をほとんど行っておらず、この分野の知識は比較的少ないです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><style type="text/css">.menus { float:left; width:98%; margin-bottom:0px; height:50px; background-image:url(images/qiannan.png);}#navs { margin-top:0px; text-align:center;}#navs li { display: inline; text-align:center; vertical-align:middle; list-style-type: none;}#navs li a { display:block; padding:15px 0px 0px 20px; margin-left:-40px; margin-right:40px; text-align:center; color:#fff; font-size:18px; font-family:arial; font-weight:900; height:35px; text-decoration:none;}#navs li a:link,#nav li a:visited { float:left; padding-right:20px; text-align:center; vertical-align:middle;}#navs li a:hover { background-color:#2c58ae; color:#E0ECFF;}.onclicks { background-color:#E0ECFF; color:#416AA3; }</style></head><body> <div style="height:32px; background-image:url(images/shengnan.png);"> <div id="saturday" style="height:50px; width:100%; background-image:url(images/qiannan.png); float:left; margin-top:0px;"> <ul id="navs"> <li><a href="#" value="arbitration/arbitration_directory.html"> <img src="images/zcts.png" width="36" height="36" style="float:left; margin:-7px 5px 0px 0px;">a</a></li> <li><a href="#" value="left_materialSubscribe.html"> <img src="images/wlsg.png" width="36" height="36" style="float:left; margin:-7px 5px 0px 0px;">b</a></li> <li><a href="#" value="left_alipay.html"> <img src="images/pay.png" width="36" height="36" style="float:left; margin:-7px 5px 0px 0px;">c</a></li> <li><a href="#" value="left_alipay.html"> <img src="images/monery.png" width="36" height="36" style="float:left; margin:-7px 5px 0px 0px;">d</a></li> <li><a href="#" value="left_alipay.html"> <img src="images/nohead.png" width="36" height="36" style="float:left; margin:-7px 5px 0px 0px;">e</a></li> <li><a href="#" value="left_alipay.html"> <img src="images/msg.png" width="36" height="36" style="float:left; margin:-7px 5px 0px 0px;">f</a></li> </ul> </div> </div> </body></html> 上記のコードは Firefox では正常に動作しますが、IE では動作しません。互換性を持たせるにはどうすればよいですか? IE8 と互換性がある必要があります
ディスカッションへの返信 (解決策)
IE8 では問題が見つかりませんでした。あなたの li は水平方向ですか?
a は幅のないブロックとして定義されています。ie6 では問題があるはずです。
IE8 効果はFirefoxと同じです...
IE8では問題は見つかりませんでした。
aは幅のないブロックとして定義されています
これは問題があります。 Firefox と IE 8 で開いた 以下のページは正常に見えます
このメニューの b をクリックすると
IE がおかしくなります:
Firefox は正常です:
IE8 と Firefox は同じ効果があります... があるようです何か表現が間違っていますが、このメニューをクリックすると、最初にクリックしなくても、IE が正常に表示されました。
あなたの元のコードはクリックすると何かをしますが、今与えているコードをクリックしても反応はありませんか？
あなたの元のコードはクリックすると何かをしますが、クリックしても反応はありませんか？あなたが今与えているコードについて はい
他の参照を使わずに、上記のコードを直接使用し、それをクリックすると、li タグが 1 行ではなく、多くの行に置き換えられます。
クリックしても元のコードは機能しますか? しかし、今私に与えられたコードをクリックしても反応がありません
b49efd7a7fab39a25f9c52a8f2a05830 ここの画像パスを表示可能な画像に変更すると問題が発生します。