absolute IE7下的BUG

Question

absolute IE7下的BUG

发布于
2016-09-11

各位大神，小弟做了一个有关定位的练习，但是其中在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元素遮挡的情况！请问该如何解决？小弟在此谢过大神！

css html

阅读 2k

1 个回答

林岑影

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

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

撰写回答