如何解决IE6和IE7中的CSS浮动问题？

Question

我在谈论我网站上文章下方的“上一页”和“下一页”帖子导航链接，在所有现代浏览器中都显示如下（IE＆gt; 7）

但在IE6和IE7中，它看起来像这样

是的，我的网站的其余部分在这些浏览器中看起来也很好，并希望让它工作，而不会破坏其他任何东西。我看到IE6和IE7可能有浮动问题，并且还有一个修复（一个工作的，我找不到）。

这是与帖子导航相关的HTML代码（如上所述）：

<div class="post-entries">
<div class="nav-prev fl"><a href="http://example.com/2011/01/01/post-1/" rel="prev"><span class="meta-nav">?</span> LG's A530 3D Notebook Shoots And Plays In 3D [PICS]</a></div>
<div class="nav-next fr"><a href="http://example.com/2011/01/01/post-2/" rel="next">LG's Mouse Scanner Saves Scanned Material To Image, PDF or DOC <span class="meta-nav">?</span></a></div>
<div class="fix"></div>
</div>

这里是与上述相关的CSS代码：

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
.post-entries a:link, .post-entries a:visited { font-size:0.9em; color:#888; }

.fl{float: left;}
.fr{float: right;}

.fix{clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;}

我希望我很清楚。有人可以帮我解决这个问题吗？

Answer 1

这个怎么样？添加了css：

/*.post-entries{float:left;width:600px}*/
.nav-prev,.nev-next{display:block;width:100%}

更新了小提琴：http://jsfiddle.net/y3MBC/14/

Answer 2

我认为如果您只是在两个div之间添加<div style="clear:left;></div>，它将按您希望的方式格式化。我在ie7中测试了它，但没有一种有效的ie6测试方法。这是更新的小提琴：http://jsfiddle.net/D3Jja/

Answer 3

看起来你还没有指定div的宽度。试试这个：

.fl{float: left; width: 100%}
.fr{float: right; width: 100%}

此外，如果您计划使用保证金/填充，请为您的浮动元素添加display: inline，以防止旧IE加倍边距/填充量。

Answer 4

感谢@ marissa.c的帮助，这就是答案......

修改此行：

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }

他的：

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; height: 100%; }

然后添加以下行：

.nav-prev, .nev-next { display:block; width:100%; }

这解决了浮动问题。它现在甚至可以在IE6中使用，全部归功于@ marissa.c