absolute IE7下的BUG


各位大神,小弟做了一个有关定位的练习,但是其中在IE7下有一个BUG,不知道如何解决,恳请大师们指点一二,废话不多说,看代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style type="text/css">
    ul,li{margin:0;padding:0;}
    ul{list-style: none;}
    #oUl{margin:200px auto;width:360px;zoom:1;padding:10px 20px 20px 20px;background:#f1f1f1;}
    .clear:after{content:'';display: block;clear: both;}
    #oUl li{width:80px;height:80px;float: left;margin-right:10px;margin-top:10px;background:#acdef3;position: relative;}
    #oUl .li_div{width:200px;height:150px;position: absolute;background:#6699ff;left:90px;top:0px;z-index:2;}
    .li_div:after{content:'';display: block;width:0px;border:5px solid #f1f1f1;border-right:5px solid #6699ff;margin-left:-10px;margin-top:20px;}
</style>
</head>
<body>
    <ul id="oUl" class="clear">
        <li><div class="li_div"></div></li>
        <li><!-- <div class="li_div"></div> --></li>
        <!-- <li><div class="li_div"></div></li>
        <li><div class="li_div"></div></li>
        <li><div class="li_div"></div></li>
        <li><div class="li_div"></div></li>
        <li><div class="li_div"></div></li>
        <li><div class="li_div"></div></li> -->
    </ul>
</body>
</html>

在IE7下会发生class为li_div的div,被相邻的li元素遮挡的情况!请问该如何解决?小弟在此谢过大神!


这是个bug, 不要在li里用定位, 不然会被后面的li遮挡, 而且设置z-index都没有用, 简单的方法就是把ul和li都换成div

另外建议, 多去看看css3, 不要想着兼容ie6-8的浏览器了.



相关阅读:
require.config is not a function
file:///C:/Users...这种file://开头的本地文件不能使用ajax获取数据?
angular 中ng-repeat能不能遍历指定顺序?
请问cx_oracle使用where col in (:1)的方式的时候,是否可以直接传入一个list或者tuple实现查询呢?
js 是怎么逐渐的成为万能语言的 ?
Python爬虫爬资源时由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败。怎么破?
Markdown编辑器服务器处理最佳实践
html中有多个form标签,每一个form标签下对应一个submit,为什么未输入内容的form表单也会提交?
canvas背景不透明,但内部某元素透明(类似镂空效果)
php制作中英文两版网站比较方便的思路
使用iconfont在线使用时,出现多个空格,求解答
使用pjax的时候直接跳转到页面了,不能替换页面中的某个div
gdb都能调试什么类型的文件?
这种在App加载页面前的显示是什么技术或者框架?
boostrap-table可以接收string类型吗
访客能够通过猜测的方式伪造出一个正确的session id并进行不好的行为吗?
react中const {dispatch} = this.props;
tomcat配置问题
vue-router如何将接口返回的数据传给组件初始化
为什么我的程序跑的很慢?



快速导航

Copyright © 2016 phpStudy |