IE6和IE7 z索引（非绝对）问题

此代码目前适用于所有现代浏览器，而不是IE6/IE7。有什么建议？我不能绝对定位任何这些：它需要适应内容。再次，我相信这在现代浏览器中完美运行。IE6和IE7 z索引（非绝对）问题

http://www.webdevout.net/test?02h&raw

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
    <title>Test</title> 
    <style type="text/css"> 
    body { padding: 0; margin: 0; } 
    #first { background: blue; padding: 0px 25px 25px 25px; margin-bottom: -10px; position; relative; z-index: 7; } 
    #second { background: #DDD; border: 1px dashed gray; height: 200px; position: relative; z-index: 8; display: block; } 
    #precedence { float: right; height: 40px; width: 40px; background-color: #f09; z-index: 9; position: relative; } 
    </style> 
    </head> 
    <body> 
    <div id="first"> 
     <div id="precedence"></div> 
    </div> 
    <div id="second"></div> 
    </body> 
</html>

同样，这不能用绝对定位。

来源

2010-09-13 xckpd7

你的问题不太清楚，但我认为你正在尝试做这样的事情？你的CSS更改为：

body { 
padding: 0; margin: 0; } 
#first { 
background: blue; 
padding: 0px 25px 25px 25px; 
margin-bottom: -10px; 
z-index: 7; 
} 
#second { 
position: relative; 
background: #DDD; 
border: 1px dashed gray; 
height: 200px; 
z-index: 8; 
display: block; 
} 
#precedence { 
height: 40px; 
width: 40px; 
background-color: #f09; 
z-index: 9; 
position: absolute; 
left: 100%; 
margin:0 0 0 -65px; 
}

不一样的，你有什么，但也适用于IE6/7

是有绝对定位的元素存在。我知道你指定的不是绝对的，但看看它是如何工作的，因为我认为这是你想要的。

而且，在你的CSS有在#first性错误

position; relative;

应该

position: relative;

但该div并不需要无论如何定位

来源

2010-09-13 02:06:14

我特别说过，它“需要适应内容”，并且不能使用绝对定位。如果我可以使用绝对定位，这将是小菜一碟。粉红色的盒子代表了一个标志即将到来的界面的灵活部分。我不但不能这样做，因为这个盒子不适应图像的大小，但是我已经设置了它，所以如果同一个栏上的导航链接与它接触，那么粉红色框就会被包裹起来。所以这对我没有帮助。 – xckpd7 2010-09-13 02:30:55

@ xckpd7是否需要将粉红色框放在#first的25像素内的右侧？如果菜单向右推进，它将包裹在菜单下方，但仍然在#first div内？ – 2010-09-13 02:54:24

所以基本上我剥离了很多代码来隔离我试图制作的问题。粉红色的盒子基本上是一个类似的带子，它总是来自页面的顶部（有一点正确的填充）。顶部栏内有导航链接，它将控制#first元素的真实高度。导航链接会左移，粉红色框会右移（粉红色框首先出现在DOM中）。当他们相互接触时，导航会在下面包裹（这可能是我不能使用abs的另一个原因）。 – xckpd7 2010-09-13 03:19:39

所以您发布的链接与此无关？事实之后很好的解释。

您的ie6/7问题源于保证金/填充问题，以及您声明Chris J指出的定位冲突。你确实提到了克里斯忽视的绝对定位，但是他的解决方案是可行的，你要么因为违反了你的规则而要么因为你没有看到它的价值。克里斯的标志盒灵活适应标志大小的变化，只是它的位置不会改变。最后....为什么你设置第二个div显示：块？这是它的默认值。

那么简单的家伙

< DOCTYPE HTML PUBLIC！ “ - // W3C // DTD HTML 4.01 // EN”“http://www.w3.org/TR/html4/strict。DTD” > < HTML语言= “en” 的> <头> <标题>测试< /标题> <风格类型= “文本/ CSS” > 体{填充：0;余量：0;} ＃第一个{background：blue; padding：0 0 15px 25px; margin：0} #second {background：#DDD; border：1px dashed grey; height：200px} #precedence {float：right; height：40px; width： 40px; background-color：＃f09; margin-right：25px} </style > < /头> <体> < DIV ID = “第一” > < DIV ID = “优先级” > < /格> < /格> < DIV ID = “第二” > < /格> </body > </html >

来源

2010-12-18 12:52:54 albert

IE6和IE7 z索引（非绝对）问题

回答

相关问题