解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容

要解决IE6, IE7不能隐藏绝对定位溢出的内容的问题，可以考虑以下几个步骤：

要解决IE6, IE7不能隐藏绝对定位溢出的内容的问题，可以考虑以下几个步骤：

1. 确定出现问题的元素

在解决IE6, IE7的问题之前，首先要确认哪些元素出现了这个问题。通常，绝对定位的元素并且其父元素设置了overflow:hidden属性时，如果绝对定位元素的尺寸超出了其父元素的尺寸，那么在IE6和IE7浏览器中，父元素的overflow:hidden属性将不会生效。因此，我们需要确定出现问题的元素。

2. 设置父元素的position属性

解决IE6, IE7的问题，第一步就是将父元素的position属性设置为非static的属性，例如relative、absolute或fixed。如果不设置，或者设置为static属性，那么父元素的overflow:hidden属性将不会生效。

.parent {
  position: relative; /* or absolute or fixed */
  overflow: hidden;
}

3. 设置z-index属性

在上述设置的基础上，如果仍然存在溢出的内容没有被隐藏，那么就可能是z-index属性的问题。在一些情况下，position属性的值相同时，z-index属性的值将会影响子元素的显示顺序。因此，可以通过设置z-index属性的值来将父元素设置在溢出元素的上层。

.parent {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.child {
  position: absolute;
  left: 100px;
  top: -50px;
  z-index: 2;
}

示例

下面举两个具体的例子来说明上述解决方案的应用情况。

示例一

在一个固定宽度的容器中，有一个绝对定位的按钮元素，它的尺寸超过了容器的尺寸而溢出。当将容器的overflow属性设置为hidden时，在Chrome、Firefox等浏览器中按钮将被正确的隐藏，但是在IE6, IE7等浏览器中按钮将展示在容器以外的区域。

<div class="container">
  <button class="button"></button>
</div>

.container {
  width: 200px;
  height: 200px;
  position: relative; /* or absolute or fixed */
  overflow: hidden;
}
.button {
  position: absolute;
  width: 300px;
  height: 50px;
  bottom: -25px;
  left: 0;
}

上述代码的解决方法为，在容器中加入position:relative属性即可。

.container {
  width: 200px;
  height: 200px;
  position: relative; /* or absolute or fixed */
  overflow: hidden;
}
.button {
  position: absolute;
  width: 300px;
  height: 50px;
  bottom: -25px;
  left: 0;
}

示例二

在一个父容器和子容器嵌套的情况下，子容器绝对定位并且超出了父容器的尺寸而溢出。当将父容器的overflow属性设置为hidden时，在Chrome、Firefox等浏览器中溢出的部分将被正确的隐藏，但是在IE6, IE7等浏览器中，完整内容将被展示在页面上。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 200px;
  height: 200px;
  position: relative; /* or absolute or fixed */
  overflow: hidden;
}
.child {
  width: 400px;
  height: 400px;
  position: absolute;
  left: -100px;
  top: -100px;
}

上述代码的解决方法为，在父元素中加入position属性，以及在父元素中设置一个z-index属性值。

.parent {
  width: 200px;
  height: 200px;
  position: relative; /* or absolute or fixed */
  overflow: hidden;
  z-index: 1;
}
.child {
  width: 400px;
  height: 400px;
  position: absolute;
  left: -100px;
  top: -100px;
  z-index: 2;
}