向左飘浮;不在IE中工作？答案

【问题标题】：float: left; Not working in IE?向左飘浮;不在IE中工作？
【发布时间】：2023-03-25 21:15:01
【问题描述】：

（我正在查看 IE 8 中的 this site。）正如您所见，内容浮动中心敲击其下方的侧边栏。它在 Chrome 中完美运行。我想不出为什么要浮动：左；命令在 IE 中不起作用。

#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}

感谢您的帮助。

塔拉

【问题讨论】：

标签： css internet-explorer css-float

【解决方案1】：

在我看来，内容并没有什么问题。

在 ie6-ie9 中，菜单似乎以某种方式失败。

而且菜单分为两行，将所有内容都向下推。我不确定这是否完全是由于s 的字母。。

注意额外的字母 s 似乎介于 #menu 和 #content .containers 之间。

Edit2：问题显然是menu a 宽度太大，菜单分成两行。

菜单的执行方式通常是 ul 或外部 div 保存颜色，然后 menu li 要么居中，要么只是浮动到左侧。这样，您就可以在没有像这样的菜单制动的情况下获得完整的高度感觉（尽管如果您在不忽略宽度的情况下这样做..可能有太多的菜单项等等。）

【讨论】：

#menu 上的 clear: both 没有帮助。这将使菜单清除它之前的浮动，而不是里面的浮动。要清除包含的浮点数，请使用overflow: hidden。
是的，我没有注意到每个元素都像它们一样单独包装。尽管在我看来最好的方法是将所有内容包装在#wrap中并将margin 0 auto;放入其中并从.container中删除margin: o auto;并将float: left; clear: both;放入.container
@lollero 我不明白......那会实现什么？清除：左；似乎理清了内容和侧边栏的浮动。（另请注意，“内容”在“容器”内。）
好吧，简而言之。它更防弹。恐怕你的做法在某些版本的 IE 中可能效果不佳。 clear 适用于 在其右侧或左侧 的 floated 元素，这意味着您应该 clear 实际上是 .container 但它们不能被清除，因为它们没有浮动。您不能只将float: left; 放入.container，因为这会使margin: 0 auto; 在这些元素中无用。因此，外包装对您有很大帮助。 jsfiddle.net/Lxe5Q - 我不确定这是否会有所帮助，但我希望它会有所帮助。检查代码中的 cmets。
请注意，我说可能不起作用，因为从技术上讲，您的代码所做的应该按原样垂直推动元素。我从不相信 IE……从不……即使在我写这篇文章的时候，我也一直在关注 IE……没有人猜测它接下来会做什么，但是当它发生时……我已经准备好了。

【解决方案2】：

我目前在 IE8 中看到的是：

问题是 IE 中的菜单链接太宽。您已将菜单中每个锚点的 width 设置为 16.62%，这对于 IE 来说太宽了。由于您的内容的宽度是固定的，我建议您为这些链接设置以像素为单位的固定宽度（132 像素），以便它们适合一行并在浏览器中看起来一致，同时删除 li 样式设置 margin: 0.5em 2em 以修复 IE 中的定位问题.

修复后我看到：

【讨论】：

@Tara 请注意，您的标记中仍然有那个额外的字母s（这两个屏幕截图中都显示了）
@lollero 感谢您指出这一点。我找到了 S 并立即将其删除。抱歉，我重新选择 Eric 作为最佳答案，因为他的方法在缩放时具有灵活性。

【解决方案3】：

如果您将overflow: hidden 添加到您的ul#list-nav，那么这将防止浮动导航弄乱文档的其余部分。

至于为什么导航显示奇怪，这是因为您指定的宽度和布局不正确。你应该使用的是：

ul#list-nav {
    overflow: hidden;
}

ul#list-nav li {
    width: 16.66%;
    float: left;
    display: block;
    margin: 0;
    padding: 0;
}

ul#list-nav li a{
    display: block;
    margin-left: 1px;text-decoration: none;
    padding: 5px 0;
    background: #754C78;
    color: #EEE;
    text-align: center;
}

这样，每个元素的宽度正好是16.66%，而不是16.62% + 1px

【讨论】：

谢谢。你的建议也很有效，我会坚持使用这种方法，因为它在缩放时很灵活:)

【解决方案4】：

添加清除：两者；在菜单容器上。

注意：在 Firefox 中被破坏到

【讨论】：