IE 7/8 忽略绝对定位 DIV 之外的相对定位 DIV答案

【问题标题】：IE 7/8 ignores relative positioned DIV outside of an abolsute positioned DIVIE 7/8 忽略绝对定位 DIV 之外的相对定位 DIV
【发布时间】：2013-06-18 17:49:06
【问题描述】：

好的，我们开始……这是我的 HTML 代码：

<div id="header">
    <div class="menu-hauptmenu-container">
        <div id="logo">
        <a href="#"></a>
        </div>
    </div>
</div>

CSS：

.menu-hauptmenu-container {
position:relative;
max-width:960px;
width:90%;
margin-left:auto; 
margin-right:auto;
height:75px;
}
#header {
position:relative;
width:100%;
background:#eb3d3c;
height:75px;
}
#logo {
    position:absolute;
    width:200px;
    height:106px;
    background: url(img/logo.png) no-repeat center;
    top:0;
    left:5px;
    z-index:9999;
}
    #logo a{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
    }

问题：IE7/8 忽略了相对定位的“.menu-hauptmenu-container”，因此绝对定位的“#logo”定位在父 DIV 之外。

一如既往，我很难用英语解释技术上的想法，所以：

我知道，这不会很受欢迎，但这里是现场网站： http://www.thorstenbreyer.de/kunden/pommerel/tcn/ieproblem/

谢谢！

【问题讨论】：

绝对定位元素就是这样，忽略父元素的位置
@Edorka 当然，除非父级也已定位。
@MrLister 确实，但 .menu-hauptmenu-container 是 position:relative
@Edorka — “定位元素”的定义是“position 属性的值不是 static 的元素”。 relative 不是 static 所以元素被定位。
@Edorka：只需在一些现代浏览器中查找它：#logo 像它应该的那样适应 .menu-hauptmenu-container (top:0; left:0;) 但在 IE7/8 中它会忽略整个父级（.menu-hauptmenu-container）..查看我发布的链接！

标签： html css internet-explorer css-position

【解决方案1】：

.menu-hauptmenu-container 在媒体查询中。 IE 7 和 8 会忽略媒体查询，因此无法正确定位。

【讨论】：

好一个。我应该注意到，在其他浏览器上，当您缩小窗口时也会发生同样的情况。