一个简单的菜单，火狐下正常，IE下点击就乱了_html/css

首頁

web前端

html教學

一个简单的菜单，火狐下正常，IE下点击就乱了_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:16 PM

很少弄前端开发，这方面的知识也比较少。

<!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="/static/imghwm/default1.png"  data-src="images/zcts.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" style="float:left; margin:-7px 5px 0px 0px;" alt="一个简单的菜单，火狐下正常，IE下点击就乱了_html/css_WEB-ITnose" >a</a></li>                    <li><a href="#" value="left_materialSubscribe.html">                    <img  src="/static/imghwm/default1.png"  data-src="images/wlsg.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" style="float:left; margin:-7px 5px 0px 0px;" alt="一个简单的菜单，火狐下正常，IE下点击就乱了_html/css_WEB-ITnose" >b</a></li>                    <li><a href="#" value="left_alipay.html">                    <img  src="/static/imghwm/default1.png"  data-src="images/pay.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" style="float:left; margin:-7px 5px 0px 0px;" alt="一个简单的菜单，火狐下正常，IE下点击就乱了_html/css_WEB-ITnose" >c</a></li>                    <li><a href="#" value="left_alipay.html">                    <img  src="/static/imghwm/default1.png"  data-src="images/monery.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" style="float:left; margin:-7px 5px 0px 0px;" alt="一个简单的菜单，火狐下正常，IE下点击就乱了_html/css_WEB-ITnose" >d</a></li>                    <li><a href="#" value="left_alipay.html">                    <img  src="/static/imghwm/default1.png"  data-src="images/nohead.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" style="float:left; margin:-7px 5px 0px 0px;" alt="一个简单的菜单，火狐下正常，IE下点击就乱了_html/css_WEB-ITnose" >e</a></li>                    <li><a href="#" value="left_alipay.html">                    <img  src="/static/imghwm/default1.png"  data-src="images/msg.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" style="float:left; margin:-7px 5px 0px 0px;" alt="一个简单的菜单，火狐下正常，IE下点击就乱了_html/css_WEB-ITnose" >f</a></li>                </ul>			</div>		</div>        			</body></html>

上面代码在火狐运行是正常的，在IE不行，请问要怎么改下都兼容？只需要兼容IE8就行了

回复讨论(解决方案)

没发现IE8有什么问题你的li是横排的么
a 定义成了block 而没有宽度在ie6就应该会有问题

IE8和firefox效果一样....

没发现IE8有什么问题你的li是横排的么
a 定义成了block 而没有宽度在ie6就应该会有问题

这是用firefox 与 IE 8 打开后的页面，看上去都没什么问题

当点击这个菜单中的b的时候
IE乱了：

Firefox正常:

IE8和firefox效果一样.... 看样子是我表述有问题了，是点击这个菜单后，IE下乱了，第一次访问不点击都显示正常。

是不是你的原始代码点击还会做什么事情但你现在给的代码点击是没什么反应的啊

是不是你的原始代码点击还会做什么事情但你现在给的代码点击是没什么反应的啊

我就是直接用这上面的代码，没有其他引用，直接运行，IE点击就变了，li标签不再保持一行，换成了很多行

是不是你的原始代码点击还会做什么事情但你现在给的代码点击是没什么反应的啊
一个简单的菜单，火狐下正常，IE下点击就乱了_html/css_WEB-ITnose
这里的images路径换个能显示的图片，就会有问题，

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract