IE6、IE7不支持二级子ul的问题

原创 2013年12月02日 15:16:02

今天遇到一个在ul下增加子ul的问题,

先贴html代码:

		<ul id="leftnav">
			<li class="leftnav-item" id="leftnav1" data-index="1"><img src="../../static/zt/gamedata_ppsg/01.jpg" alt="了解游戏"><b class="leftnav-layer" id="leftnav-layer1"></b></li>
			<li class="leftnav-item" id="leftnav2" data-index="2">
				<img src="../../static/zt/gamedata_ppsg/02.jpg" alt="基础资料">
				<b class="leftnav-layer" id="leftnav-layer2"></b>

			</li>
			<ul class="gamedata-list">
				<li class="gamedata-item"><span>部队系统</span><b class="gamedata-layer" id="gamedata-layer1"></b></li>
				<li class="gamedata-item"><span>卡片系统</span><b class="gamedata-layer" id="gamedata-layer2"></b></li>
				<li class="gamedata-item"><span>科技系统</span><b class="gamedata-layer" id="gamedata-layer3"></b></li>
				<li class="gamedata-item"><span>分解系统</span><b class="gamedata-layer" id="gamedata-layer4"></b></li>
				<li class="gamedata-item"><span>升级系统</span><b class="gamedata-layer" id="gamedata-layer5"></b></li>
			</ul>
			<li class="leftnav-item" id="leftnav3" data-index="3"><img src="../../static/zt/gamedata_ppsg/03.jpg" alt="起始武将"><b class="leftnav-layer" id="leftnav-layer3"></b></li>
		</ul>

采用上述结构的原因是起初二级ul放在父li里面的话会影响hover浮层效果覆盖的区域:浮层会将二级ul全部罩住,影响鼠标点击二级菜单操作。所以就把二级ul拿出来放在li外了。可是这样ie7下就不显示二级ul了。

对应CSS代码:

#leftnav{position:absolute;z-index:9;left:10px ;top:10px;border: 1px solid #c8c2c0;width: 240px;overflow: hidden;border-bottom: none;}
.leftnav-item{position:relative;width: 100%;height: 98px;border-bottom: 1px solid #c8c2c0;float: left;cursor: pointer;}
#leftnav1{}
.leftnav-layer{display:block;position: absolute;left: 0;top: 0;width: 100%;height: 98px;bottom:98px;}
.cur,.leftnav-layer:hover{background-color: #000;-webkit-opacity:0.3 ;-moz-opacity: 0.3;-o-opacity:0.3;opacity: .3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter: alpha(opacity=30);}
.gamedata-list{float:left;background: url("../../zt/gamedata_ppsg/data.png") no-repeat 0 0 transparent;width:240px;height: 342px;}
#leftnav2{height: 440px;}
.gamedata-item{cursor:pointer;position:relative;padding:1px 0;height: 65px;line-height:65px;float: left;padding-left: 90px;font-size: 27px;color: #fff;}
.gamedata-layer{position: absolute;left: 18px;top: 5px;width: 200px;height: 100%;}
.sel,.gamedata-layer:hover {/*position: absolute;left: 18px;top: 5px;width: 200px;height: 65px;*/background:url("blank");
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(to bottom,rgba(255,255,255,.5), rgba(255,255,255,0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#50ffffff,endColorstr=#00ffffff)"; /*Filter for IE8 */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#50ffffff, endColorstr=#00ffffff); /*Filter for older IEs */
}

在IE6和IE7下子ul.gamedata-list诡异的隐藏起来不显示了。效果如图

而在标准浏览器里是这样的效果:


查阅发现这种ul > ul结构可能是不合规范,确实是IE6-7下的解析兼容问题,国外有建议将此二级结构放在table布局里用td分隔开以防止解析错误。对于我是不太愿意使用这种蹩脚的方法,更愿意从根本上从CSS或调整结构入手。有人说用dl > dd代替二级ul可以回避这个问题,有兴趣的可以试一下。

多次尝试使用CSS来解决但发现无效,对IE6-7太顽固了。

最后只能将结构改回原来的在li下放ul形式。

 

原来存在的问题是因为只有IE7+才支持任何元素的:hover伪类,所以抛弃了这个即将过时的IE6的hover效果,后来发现自己写的jquery click和mouseover效果有局限性:只有点在浮层上才能触发click效果。故而将二级ul列表的b标签更改为a标签,且对要hover的容器换成a标签以支持ie6,另外对a链接加以href属性,否则IE6-8也是无法展示鼠标移上的效果的,这样以兼容所有浏览器下的菜单点击切换对应的内容。

 

修改后的结构如下所示:

		<ul id="leftnav">
			<li class="leftnav-item" id="leftnav1" data-index="1"><a class="leftnav-layer" id="leftnav-layer1"  href="javascript:void(0);"><img src="../../static/zt/gamedata_ppsg/01.jpg" alt="了解游戏"></a></li>
			<li class="leftnav-item" id="leftnav2" data-index="2">
				<a  href="javascript:void(0);" class="leftnav-layer" id="leftnav-layer2">
				<img src="../../static/zt/gamedata_ppsg/02.jpg" alt="基础资料">
				<!-- <b class="leftnav-layer" id="leftnav-layer2"></b> -->
				</a>
				<ul class="gamedata-list">
					<li class="gamedata-item"><span>部队系统</span><a href="javascript:void(0);" class="gamedata-layer" id="gamedata-layer1"></a></li>
					<li class="gamedata-item"><span>卡片系统</span><a href="javascript:void(0);" class="gamedata-layer" id="gamedata-layer2"></a></li>
					<li class="gamedata-item"><span>科技系统</span><a href="javascript:void(0);" class="gamedata-layer" id="gamedata-layer3"></a></li>
					<li class="gamedata-item"><span>分解系统</span><a href="javascript:void(0);" class="gamedata-layer" id="gamedata-layer4"></a></li>
					<li class="gamedata-item"><span>升级系统</span><a href="javascript:void(0);" class="gamedata-layer" id="gamedata-layer5"></a></li>
				</ul>
			</li>

			<li class="leftnav-item" id="leftnav3" data-index="3"><a class="leftnav-layer" id="leftnav-layer3" href="javascript:void(0);"><img src="../../static/zt/gamedata_ppsg/03.jpg" alt="起始武将"></a></li>
		</ul>

新修改后的CSS样式代码:

#leftnav{position:absolute;z-index:9;left:10px ;top:10px;border: 1px solid #c8c2c0;width: 240px;overflow: hidden;border-bottom: none;}
.leftnav-item{position:relative;width: 100%;height: 98px;border-bottom: 1px solid #c8c2c0;float: left;cursor: pointer;}
.leftnav-layer{display:block;width: 240px;height: 98px;}
.cur, .leftnav-item a:hover{background-color: #000;-webkit-opacity:0.3 ;-moz-opacity: 0.3;-o-opacity:0.3;opacity: .3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);filter: alpha(opacity=30);}
.gamedata-list{float:left;background: url("../../zt/gamedata_ppsg/data.png") no-repeat 0 0 transparent;width:240px;height: 342px;}
#leftnav2{height: 440px;}
.gamedata-item{cursor:pointer;position:relative;padding:1px 0;height: 65px;line-height:65px;float: left;padding-left: 90px;font-size: 27px;color: #fff;}
.gamedata-layer{position: absolute;left: 18px;top: 5px;width: 200px;height: 100%;}
.sel,.gamedata-item a.gamedata-layer:hover {position: absolute;left: 18px;top: 5px;width: 200px;height: 65px;background:url("blank");
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top,rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(to bottom,rgba(255,255,255,.5), rgba(255,255,255,0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#50ffffff,endColorstr=#00ffffff)"; /*Filter for IE8 */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#50ffffff, endColorstr=#00ffffff); /*Filter for older IEs */
}

jQuery实现的点击效果:

	$(function(){
		$(".leftnav-item").click(function(e){
			//e.stopPropagation();
			var $target = $(e.target);
			var navindex = $(this).attr("data-index");
			$(this).find(".leftnav-layer").addClass("cur");
			$(this).siblings().find(".leftnav-layer").removeClass("cur");
			$(".gamedata-item").find(".gamedata-layer").removeClass("sel");
			$("#innervd").css("display","none");

			if(navindex == 2){				
				$(".gamedata-item").eq(0).find(".gamedata-layer").addClass("sel");
				$(".gamedata-item").not(':eq(0)').find(".gamedata-layer").removeClass("sel");
				$(".con").css("display","none");
				$("#c1").css("display","block");
			}
			$(".con-wrapper").css("display","none");
			$("#con" + navindex).css("display","block");

		});
		$(".gamedata-item").click(function(e){
			e.stopPropagation();//IE阻止冒泡
			var $target = $(e.target);
			var liindex = $(this).index() + 1;
			$(this).find(".gamedata-layer").addClass("sel");
			$(this).siblings().find(".gamedata-layer").removeClass("sel");
			$("#innervd").css("display","none");
			if($target.is("#gamedata-layer" + liindex)){
				$(".con-wrapper").css("display","none");
				$("#con2").css("display","block");

				$(".con").css("display","none");
				$("#c" + liindex).css("display","block");

			}
		});
		$("#wujiang-link li").mouseover(function(e){
			var index = $(this).index();
			$(this).addClass("selected").siblings().removeClass("selected");
			$("#wujiang-intro li").eq(index).css("display","block");
			$("#wujiang-intro li").eq(index).siblings().css("display","none");
		}).eq(0).trigger("mouseover");
		
	})

好久没写日志记录了,好像有很多心得,改天继续。

使用zoom、overflow解决IE6、IE7、FF下嵌套容器清除浮动问题

使用zoom、overflow解决IE6、IE7、FF下嵌套容器清除浮动问题  我们经常遇到一个容器外面套一个边框,边框高度随容器高度变化,但是当边框内容器设置了浮动属性后,外框就不跟随变化,这时就需...
  • xiongyuefei
  • xiongyuefei
  • 2008年10月17日 20:42
  • 9060

ie6,ie7 不支持 JSON.stringify解决办法

!–[if lt IE 7]> IE7以及IE7以下版本可识别 来自:http://www.85zu.com/blog/?p=340...
  • zjhhust
  • zjhhust
  • 2014年01月16日 11:21
  • 5567

li中嵌套ul在ie6,7下的bug

今天做完页面重构,将页面交给页面审核同学进行页面审核时,出现了一个问题,问题文字描述如下:整个页面主要内容结构都是由ul、li嵌套组成,其中内容最后一段关于产品说明,因为内容有几条,所以在原有ul、l...
  • fengri5566
  • fengri5566
  • 2012年02月13日 22:33
  • 1588

:first-child :last-child IE5,IE6,IE7,IE8的css兼容性列表

:first-child :last-child IE7 IE8都不支持http://www.cnblogs.com/kingjiong/archive/2009/04/03/1429040.htm...
  • kakaxiD
  • kakaxiD
  • 2016年04月15日 14:14
  • 909

IE6 IE7下ol li无法显示list-style-type解决办法

------解决方案-------------------- li { list-style:decimal inside; } /* 或 */ li { list-style:decima...
  • pangzimin
  • pangzimin
  • 2014年01月25日 17:31
  • 830

文件上传浏览器兼容问题(IE6与IE7,8的问题)

      这几天处理了一个文件上传的问题。使用的是比较常用的Apache的一个模块。问题的关键不在于后台程序,经过测试,后台是没有问题的,关键还在前端。因为我使用ie6时可以成功上载,而使用Fire...
  • jubincn
  • jubincn
  • 2009年12月02日 16:44
  • 4162

兼容IE6,IE7,IE8,FF的JQuery 垂直二级导航菜单

导航条
  • ad0128
  • ad0128
  • 2010年06月05日 23:25
  • 4180

IE6 7 下右浮动元素自动换行问题

IE6 7 下右浮动元素自动换行问题问题原因: IE6 IE7 IE8(Q) 下,若浮动元素之前存在兄弟行内非浮动元素,IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所...
  • qq_27090183
  • qq_27090183
  • 2015年08月15日 11:10
  • 1428

在IE7及以下不能使用JSON.stringify函数的问题解决

jQuery对于从JSON字符串到JSON对象的转换提供了 $.parseJSON() 函数,并做到了很好的兼容性,纵使在IE7环境中也可正常运行。然而,它却没有提供从JSON对象到JSON字符串的转...
  • wutao1155
  • wutao1155
  • 2017年03月31日 18:08
  • 726

UL li在IE7及以下版本问题

1、在IE7及以下版本中,UL中不能出现非LI标签,如果出现非LI标签那么,浏览器会自动将非LI标签用靠近它的LI标签包裹住,成为Li中的内容。 昨天做了一个页面,IE7和IE6没有进行测试,结果业...
  • fengri5566
  • fengri5566
  • 2013年07月24日 10:21
  • 835
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE6、IE7不支持二级子ul的问题
举报原因:
原因补充:

(最多只允许输入30个字)