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

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(这是一个太大的蠕虫进入这里)时才有必要.