IE6 绝对定位

Question

有结构。广告是相对定位的。并且 div.ad 中的所有其他 div 都是绝对定位的。

左上角、左下角、右上角、右下角样式看起来应该是这样。但是“内部”、“左侧”、“右侧”、“顶部”和“底部”样式不起作用。
left, right 没有特定的高度，top,bottom 没有特定的宽度，内部没有 bec 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');

您可以使用“sliding doors”技术来获得基于图像的顶部或底部边框，无需太多元素且无需脚本；简而言之，左上角和上边是主 div 的背景，右手边是一个绝对定位的小 div 的背景。

Answer 2

将min-height 和min-width 属性替换为height 和width。 IE6 不支持min-* 和max-* 属性，所以.ad 目前没有设置任何尺寸。这也将为.ad 提供一个“layout”，这意味着您将能够正确定位其具有right 和bottom 属性的子项。