IE6绝对定位 [英] IE6 Absolute positioning

问题描述

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

There is structure. ad is positioned relative. And the all other divs in div.ad positioned absolute.

左上角，左下角，右上角，右下角风格。但是内部，左，右，顶部和底部样式不工作。

left，right dont具有特定的高度和顶部，底部没有特定的宽度，并且内部没有两个bec.ad的高度和宽度可展开。

top-left, bottom-left, top-right, bottom-right styles looking as it should. But "inside", "left", "right", "top", and "bottom" styles not working.
left, right dont have specific heights and top, bottom dont have specific widths and inside dont have both bec div.ad's height and width expandable.

它在IE 7,8,9 Opera 10.50+，Chrome和Firefox上的工作

Its working on IE 7,8,9 Opera 10.50+, Chrome and Firefox

现代浏览器屏幕截图 http://i56.tinypic.com/2ia8tj5.png

IE6 Screenshot http://i54.tinypic.com/2yozvar.png

Modern browser screenshot http://i56.tinypic.com/2ia8tj5.png
IE6 Screenshot 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*/

推荐答案

IE6不支持左右两个元素，或顶部和底部。您可以使用CSS表达式实现相同的结果，但是它很慢，需要启用脚本：

IE6 doesn't support both left and right on an element, or both top and bottom. You can achieve the same result using a CSS expression, but it is slow and requires scripting to be enabled:

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

您可以使用滑动门技术来获得基于图像的顶部或底部边框，没有任何元素和脚本;简而言之，左手角和顶部是主div的背景，右手边是小的绝对定位的div的背景。

You can use a "sliding doors" technique to get an image-based top or bottom border without as many elements and without script; in short the left hand-corner and top are the background of the main div and the right-hand side is the background of a small absolutely positioned div.

这篇关于IE6绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！