IE兼容问题

做web这么多年了,经常碰到兼容问题,一直没有,有些问题不经常碰到,基本上是前面解决后面忘,猴子搬包谷,所以写个笔记记录下吧~~

OK,直接入主题吧

主要问题是是在IE8兼容模式下绝对定位得z-index,无法被父节点得兄弟节点遮盖,举个栗子

<div class="parent">

<div class="child">

</div>

</div>

<div class="parent0"></div>

<style>

  .parent{

    height:100px;width:100%;position:relative;

  }

  .child{

    width:100px;height:200px;background_color:red;

  .parent0{

    width:100%;height:100px;background_color:blue;

  }

</style>

OK ,执行下这块代码,你就会看见红色的区域(.child div)被蓝色区域(.parent0 div)遮挡住

主要原因是,在IE6和IE7   绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用

定位元素没有设置z-index的时候,兄弟节点后面元素的z-index大于前面节点

所以可以针对这个问题做一个IE6,IE7的css hack解决问题

.parent{*z-index:1}

  

原文地址:https://www.cnblogs.com/wchaofan/p/9069241.html