如何修复 IE6 和 IE7 中的 CSS 浮动问题？答案

【问题标题】：How to fix CSS float issues in IE6 and IE7?如何修复 IE6 和 IE7 中的 CSS 浮动问题？
【发布时间】：2011-11-29 03:11:45
【问题描述】：

我说的是我网站上文章下方的“上一个”和“下一个”帖子导航链接，在所有现代浏览器 (IE > 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;}

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

【问题讨论】：

这是一个jsfiddle...
看起来并没有那么糟糕。我倾向于让它为 IE7 坏掉。但是为什么要支持IE6呢？
我其实很担心 IE7，但我只是提到它在 IE6 中也是一样的（显然应该如此）。这对我来说确实很不妙。我的网站即使在 IE6 中看起来也很棒，除了这部分。这就是我担心的。为什么要离开它？
您希望链接水平位于同一行吗？还是在第一张图片所示的位置？
@marissa.c 如第一张图片所示。

标签： css internet-explorer

【解决方案1】：

这个怎么样？添加css：

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

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

【讨论】：

没有帖子条目不能限制为 600 像素的宽度 - 我的帖子正文是 650 像素，我也有全宽帖子。见：bit.ly/o8XCSf
我们快到了！我只添加了.nav-prev,.nev-next{display:block;width:100%}，它现在在 IE7 中看起来像这样：bit.ly/nsiOXJ 如何将另一个链接放入框中（虚线框）？
尝试 .post-entries{float:left}
不起作用。现在看起来像这样：bit.ly/oLLob2 无法解决这个问题吗？
试试 .post-entries{width:100%}

【解决方案2】：

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

【讨论】：

不幸的是，这并没有改变任何事情。 :(

【解决方案3】：

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

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

此外，如果您打算使用边距/填充，请在浮动元素中添加 display: inline，以防止旧 IE 将边距/填充量加倍。

【讨论】：

所以你的意思是说我应该使用.fl{float: left; width: 100%; display: inline;} 和.fr{float: right; width: 100%; display: inline;} 对吗？
如果您打算为元素添加边距/填充，则只需要display: inline。如果没有，那你很好。
浮动对齐与width: 100%; 一起消失了我的意思是当我使用.fl{float: left; width: 100%;} 和.fr{float: right; width: 100%;} 时，两条线都向左对齐。 :(

【解决方案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

【讨论】：