Как мне остановить 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 (это слишком большая банка червей, чтобы попасть сюда).

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;
}