2011-08-15 86 views
0

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

左上角,左下角,右上角,右下角样式看起来应该如此。但是“内部”,“左”,“右”,“顶部”和“底部”风格不起作用。
左边,右边没有特定的高度和顶部,底部没有特定的宽度和里面都没有因为div.ad的高度和宽度可扩展。

及其对IE 7,8,9歌剧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*/ 
+1

这不回答你的问题的说明,但如果你需要使用IE6向后可比性,你只是在做花哨的边界,有时会回落到美好的旧

标签很容易,因为他们把工作做好,更容易了解过时的浏览器中复杂的CSS框模型。 –

回答

1

IE6不支持。您可以使用CSS表达式达到同样的效果,但它是缓慢的,需要的脚本启用:

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

您可以使用“sliding doors”技术以获得基于图像的顶部或底部边框没有尽可能多元素和没有脚本;总之左手角和顶部是主要的div和右侧的背景是一个小的绝对定位的div的背景。

+0

它的作品,但不是使用CSS表达式。我宁愿写一般的JavaScript来做到这一点。 http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_6/ –

0

heightwidth更换min-heightmin-width性能。 IE6不支持min-*max-*属性,所以.ad当前没有设置任何维度。这也给.ad的“layout”是什么意思,你就能够将其孩子rightbottom性质正确定位。左,右一个元素上,或者顶部和底部

+0

这不起作用。我更新了问题添加的屏幕截图。 –