代码之家 › 专栏 › 技术社区 › Paul D. Waite

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

internet-explorer-6 internet-explorer css

1

Paul D. Waite · 技术社区 · 16 年前

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

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

...

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

.element 位于其父元素外部的元素被剪裁,即不可见、隐藏、截断。我该如何解决这个问题?

3 回复 | 直到 16 年前

1

5

Paul D. Waite 16 年前

分配 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>

只有当父元素有Layout时才需要这样做(这是一个太大的蠕虫罐,无法进入这里)。

2

1

Paul D. Waite 15 年前

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

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

3

0

Eystein 16 年前

在IE6中,当负利润与浮动相结合时,就会发生这种情况。

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