您的位置:首页 > 其它

ul ,li 兼容IE6和IE7

2013-06-09 19:22 204 查看
你看到这个标题,肯定很不可思议是不是,ul,li还会有兼容性问题。确实,我也是第一次遇到,但是我这辈子算是记住了。

ul,li,在IE6和IE7下,li的兄弟元素不能是其他标签,例如:div等等。一般情况下是发现不了这个bug的,主要是今天用到了jquery的事件,发现在ie6,ie7下没效果,在JS代码打印又没有任何错误,因此我想问题可能出在了结构和样式上。因为是隐藏的元素,平时看样是很难发现。所以我首先检查结构,突发奇想,难道是ul里不能写div??于是从这里发现了这个bug.发现了这个bug,感觉特别有收货!!!

代码如下:

JS代码:
$(document).ready(function(){
$(".question_list>li").each(function(){
$(this).click(function(){
$(this).next(".box_hide").toggle();
$(this).siblings("li").next(".box_hide").hide();
$(this).children("a").css("color","#EC7302");
})
})
})


错误结构代码:
<ul class="question_list">
<li>
<a href="void(0)">什么是CTQ?< /a>
</li>
<div class="box_hide">
<p class="one">
CTQ客户端软件可称为物联网世界的人与物的即时通讯软件,不仅具有目前即时通讯软件所具有的即时聊天等功能,同时与物联网相结合,增加携卡对象的位置、状态等信息的实时显示功能。CTQ客户端软件应用于电脑操作系统。
</p>
</div>
</ul>
正确的结构代码:
<ul class="question_list">
<li>
<a href="void(0)">什么是CTQ?< /a>
</li>
<li class="box_hide">
<p class="one">
CTQ客户端软件可称为物联网世界的人与物的即时通讯软件,不仅具有目前即时通讯软件所具有的即时聊天等功能,同时与物联网相结合,增加携卡对象的位置、状态等信息的实时显示功能。CTQ客户端软件应用于电脑操作系统。
</p>
</li>
</ul>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: