html - IE6绝对定位

Question

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

左上角、左下角、右上角、右下角样式看起来应该是这样。但是“内部”、“左”、“右”、“顶部”和“底部”样式不起作用。
左、右没有特定的高度，顶部、底部没有特定的宽度，内部也没有因为 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 的背景。