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代码:
错误结构代码:
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>
相关文章推荐
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- ul中的li的高度在IE6、IE7、IE8、FF下不兼容问题的解决办法
- 用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
- CSS问题1:div中 li宽度不固定 ie6和ie7不兼容不自动换行
- IE6|7|8/9兼容模式 UL LI OnClick 事件问题
- div中 li宽度不固定 ie6和ie7不兼容不自动换行
- 【兼容】ul float:left;加display:inline; ie6ie7 bug
- 用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
- 2010全面兼容多浏览器IE6-IE7-IE8-FF的CSS HACK写法
- IE6、IE7、IE8的CSS、JS兼容
- CSS实现透明度(兼容IE6 IE7 IE8 FF CHROME,其他还未测试)
- 转帖:IE6, IE7, IE8, Firefox 兼容的“加入搜藏夹”脚本
- 兼容IE6,IE7,火狐Firefox多款浏览器的日期(日历)选择器特效,不会被SELECT挡住
- div+css 布局下兼容IE6 IE7 FF常见问题
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)
- 兼容ie6,ie7,ie8,firefox,chrome浏览器的代码片段