IE6 Абсолютное позиционирование

Question

Есть структура. Объявление позиционируется относительно. И все остальные div'ы в div.ad позиционируются как абсолютные.

верхний левый, нижний левый, верхний правый, нижний правый стили выглядят так, как должны. Но стили "inside", "left", "right", "top" и "bottom" не работают.
слева, справа не имеют определенной высоты и вершины, снизу не имеют определенной ширины, а внутри не имеют расширяемой высоты и ширины div.ad.

Работает на IE 7,8,9 Opera 10.50+, Chrome и Firefox

Скриншот современного браузера http://i56.tinypic.com/2ia8tj5.png
Снимок экрана IE6 http://i54.tinypic.com/2yozvar.png

<div class="ad">
    <div class="bottom"></div>
    <div class="top-left"></div>
    <div class="left"></div>
    <div class="bottom-left"></div>
    <div class="top"></div>
    <div class="inside"></div>
    <div class="top-right"></div>
    <div class="right"></div>
    <div class="bottom-right"></div>
</div>

.ad {
    color: #606060;
    position: relative;
    padding: 12px;
    min-height: 55px;
    min-width: 246px;
    margin: 0 0 10px 0;
}
/*Side Start*/
.top {
    top: 0;
    left: 11px;
    right: 10px;
    position: absolute;
    height: 11px;
}
.right {
    top: 11px;
    right: 0;
    bottom: 9px;
    position: absolute;
    width: 10px;
}
.bottom {
    bottom: 0;
    left: 11px;
    right: 10px;
    position: absolute;
    height: 9px;
}
.left {
    left: 0;
    top: 11px;
    bottom: 9px;
    position: absolute;
    width: 11px;
}
/*Side End*/
.inside {
    position: absolute;
    background-color: #f7f6f6;
    top: 11px;
    right: 10px;
    bottom: 9px;
    left: 11px;
}
/*Corners Start*/
.top-left {
    top: 0;
    left: 0;
    position: absolute;
    background-image: url('/images/DiseaseAds/border-top-left.png');
    background-repeat: no-repeat;
    width: 11px;
    height: 11px;
}
.top-right {
    right: 0;
    top: 0;
    position: absolute;
    width: 10px;
    height: 11px;
}
.bottom-left {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 11px;
    height: 9px;
}
.bottom-right {
    bottom: 0;
    right: 0;
    position: absolute;
    width: 10px;
    height: 9px;
}
/*Corners End*/

Answer 1

IE6 не поддерживает как левый и правый элемент, так и верх и низ.Вы можете достичь того же результата, используя выражение CSS, но оно медленное и требует включения сценариев:

left: 11px;
width: expression((this.parentNode.offsetWidth - 11 - 10) + 'px');

Вы можете использовать технику " раздвижные двери ", чтобы получить изображение- верхняя или нижняя граница на основе без как можно большего количества элементов и без скрипта;короче говоря, левый угол и верх - фон основного элемента, а правая - фон маленького абсолютно расположенного элемента.

Answer 2

Заменить свойства min-height и min-width на height и width.IE6 не поддерживает свойства min-* и max-*, поэтому .ad в настоящее время не имеет установленных размеров.Это также даст .ad " layout ", что означает, что вы сможете правильно расположить его дочерние элементы со свойствами right и bottom.