IE6、IE7不支持二级子ul的问题
2013-12-02 15:16
204 查看
今天遇到一个在ul下增加子ul的问题,
先贴html代码:
采用上述结构的原因是起初二级ul放在父li里面的话会影响hover浮层效果覆盖的区域:浮层会将二级ul全部罩住,影响鼠标点击二级菜单操作。所以就把二级ul拿出来放在li外了。可是这样ie7下就不显示二级ul了。
对应CSS代码:
在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也是无法展示鼠标移上的效果的,这样以兼容所有浏览器下的菜单点击切换对应的内容。
修改后的结构如下所示:
新修改后的CSS样式代码:
jQuery实现的点击效果:
好久没写日志记录了,好像有很多心得,改天继续。
先贴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"); })
好久没写日志记录了,好像有很多心得,改天继续。
相关文章推荐
- ff ie7 ie6 css支持问题[拼网页标记]
- 解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
- 解决IE7和IE6不支持javaScript中的indexOf函数的问题
- 解决position: fixed;不兼容IE7的问题,由于IE6不支持些属性,可以不管
- window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
- 解决ie6, ie7不支持table.appendChild("tr")的浏览器兼容性问题?
- 解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- JS代码判断浏览器版本,支持IE6,IE7,IE8,IE9!三种方法!
- padding+div 在ie7、ie6以及firefox中的兼容问题
- [转]CSS中设置div最小高度(支持IE6, IE7, IE8, FF等浏览器)
- editor.js BtnMouseUp()报错 IE6,IE7,IE8兼容问题
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- (转)一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- CSS中使用!important解决IE6 IE7 Firefox兼容性问题
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 使用zoom、overflow解决IE6、IE7、火狐浏览器下嵌套容器清除浮动问题
- IE6,IE7 关于js动态调整img src属性,无法正确发出异步请求的问题
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- IE6、IE7、IE8、FireFox css line-height兼容问题