Question

这是在wordpress.com上托管的博客的简化风格。代码是经过验证的CSS，但IE无法正确显示（这不是真正的新闻，是吗？）。特别是，IE中无法看到上层菜单（#primary div），导致博客无法使用。

简单的解决方案是更改div命令，但由于wordpress给出了样式，对此问题的限制是你只能更改css代码，而不是html。

你们可以找出一个轻松覆盖IE的演示怪癖吗？我已经读过这可能与hasLayout属性有关，但我不熟悉网页设计。

<HTML><HEAD >

<style type="text/css">

div#wrapper {
width:1000px;
background:#fff url('http://embolsados.files.wordpress.com/2009/03/bg.png') repeat-y 50% 0;
margin:0 auto;
}

div#header {
text-align:center;
background:#ddd;
color:#eee;
width:980px;
height:333px;
position:relative;
left:10px;
margin:0;
}

div#container {
float:left;
position:relative;
left:10px;
top:0;
width:630px;
font-size:.9em;
line-height:1.8em;
padding:30px;
}

#primary {
background:#32a855;
width:980px;
position:absolute;
top:333px;
text-indent:15px;
border:0;
margin:0 0 0 10px;
padding:0;
}

#secondary {
float:right;
overflow:hidden;
width:270px;
position:relative;
left:-10px;
top:0;
padding:10px;
}

div#footer {
background:#32a855 url('http://embolsados.files.wordpress.com/2009/05/footer.png') no-repeat;
color:#fff;
text-align:center;
clear:both;
height:40px;
padding-top:25px;
position:relative;
}

div#footer a {
color:#fff;
}
</style>

</HEAD>


<BODY>
<DIV id=wrapper>

<DIV id=header>Title</DIV>

<DIV id=container>

    <DIV id=content>Content.</DIV>
</DIV>

<DIV class=sidebar id=primary>Upper menu.</DIV>

<DIV class=sidebar id=secondary>Side menu.</DIV>

<DIV id=footer>Footer</DIV>

</DIV>
</BODY>
</HTML>

Answer 1

看起来这是你的问题

http://www.brunildo.org/test/IE_raf3.html

简而言之，在浮动元素和abs定位元素之间添加一个空<div></div>。这很难看，但这是我发现的唯一有效的方法。

Answer 2

AFAIK除了删除兄弟元素上的浮动属性之外没有办法，或者如你所说，更改源顺序..可能在AP周围包裹一个div。

Answer 3

您可以尝试将以下行添加到#primary styles部分：

*display: expression(style.display='block', 0);

Answer 4

将绝对定位的元素包装在非浮动的div中可以解决问题。

http://www.daharsh.net/tech/2008/10/ie6-or-ie7-position-absolute-not.htm

绝对定位DIV没有在IE上显示

4 个答案: