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

Question

（我在IE 8中查看this site。）正如您所看到的那样，内容浮动中心会敲击它下面的侧边栏。它在Chrome中完美运行。我想不出为什么漂浮：离开;命令在IE中不起作用。

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

感谢您的帮助。

塔拉

Answer 1

我目前在IE8中看到的是：

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

修复后我看到了这个：

Answer 2

对我而言，内容看起来并没有什么问题。

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

并且菜单分为两行，将所有内容都按下。我不确定这是否完全归因于s信件。

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

Edit2：问题显然是menu a宽度太大而且菜单分为两行。

经常进行菜单的方式是ul或外部div保持颜色，然后menu li或者在其中居中，或者只是浮动到左侧。这样你就可以获得完整的高度感，而不会像这样制作菜单的游戏（尽管如果你这样做而不忽略宽度......可能有太多的菜单项等等。）

Answer 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

Answer 4

添加明确：两者;在菜单容器上。

注意：在Firefox中被打破