Question

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

左上角，左下角，右上角，右下角的样式看起来应该如此。但“内部”，“左”，“右”，“顶部”和“底部”样式不起作用。
左，右没有特定的高度，顶部，底部没有特定的宽度，里面没有两个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个属性。

IE6绝对定位

2 个答案: