Home >Web Front-end >HTML Tutorial >A simple menu works fine under Firefox, but clicks messily under IE_html/css_WEB-ITnose
A simple menu works fine under Firefox, but clicks messily under IE_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:16:53896browse
I rarely engage in front-end development and have relatively little knowledge in this area.
<!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> The above code runs normally in Firefox, but not in IE. How can I change it to make it compatible? It just needs to be compatible with IE8
Reply to the discussion (solution)
I didn’t find any problem with IE8. Is your li horizontal?
a is defined as block and Without width, there should be problems in ie6
IE8 has the same effect as firefox....
I haven’t found any problems with IE8. Is your li horizontally arranged?
a is defined as There should be problems in ie6 if there is block but no width
This is the page opened with firefox and IE 8, it looks fine
When clicking on this menu When b
IE is messed up:
Firefox is normal:
IE8 has the same effect as firefox.... It seems that there is something wrong with my expression. I clicked this menu Finally, IE was messed up, and the display was normal even if I didn't click on it for the first time.
Does your original code do anything when clicked? But the code you give now has no response when clicked
Does your original code do anything when clicked? But you There is no response when clicking on the code given now
I just use the above code directly, without other references, and run it directly. When I click on it, it changes. The li tag no longer maintains one line, but is replaced by many lines.
Does your original code do anything when clicked? But the code you give now has no response when clicked
ed5595c15a78286f4271f0212aebdfae
If the images path here is changed to an image that can be displayed, there will be a problem,