Question

我有一个元素通过负边距位于其父元素之外，如下所示：

<style>
.parent {
    height: 1%;
}

.element {
    float: left;
    margin-left: -4px;
}
</style>

...

<div class="parent">
    <div class="element">Element</div>
</div>

在Internet Explorer 6中，位于其父元素之外的.element部分被剪切，即不可见，隐藏，切断。我该如何解决这个问题？

Answer 1

将position: relative;分配给.element，如下所示：

<style>
.parent {
    height: 1%;
}

.element {
    float: left;
    margin-left: -4px;
    position: relative; /* Fixes clipping issue in IE 6 */
}
</style>

...

<div class="parent">
    <div class="element">Element</div>
</div>

只有在父元素hasLayout（这是一个太大的蠕虫进入这里）时才需要这样做。

Answer 2

<style>
.parent {
    height: 1%;
    overflow: auto;
    _zoom: 1; /*ie6 hack forces has layout*/
}

.element {
    float: left;
    margin-left: -4px;
}
</style>

Answer 3

这种情况发生在IE6中，负边距与浮动相结合。

如果可以的话，摆脱浮动：

.element {
   float: none:
   zoom: 1;
}

如何阻止IE6通过负边距剪切位于其父元素之外的元素？

3 个答案: