Question

我对此完全感到困惑，并不完全了解IE7的问题。有问题的页面是here，我正在谈论顶部的灰色菜单栏。在所有其他合理的现代浏览器上它看起来很好。在IE7上（也可能是IE6，但我们不支持），div.navArrow元素float:right被一直向右推，使父元素<li>占用页面的剩余宽度。

我不知道从哪里开始解决这个问题。有什么想法吗？

Answer 1

我实际上是通过为IE7及以下版本应用特殊的CSS来解决这个问题。我为父<li>提供了float:right样式，div.navArrow为float:none。这似乎可以解决问题。

Answer 2

Meybe将帮助您使用任何类型。根据经验，我知道position: relative;无法修复，您可以在IE7中使用zoom: 1;进行修复。 Facebook使用这个clearfix：

.clearfix{
    zoom: 1;
}
.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

如果内容没有流出容器并不重要，您可以使用overflow: hidden;设置容器并使用该工具非常正常。

Answer 3

您的DOCTYPE之前有一个空格，并且最有可能触发此问题。此外，定义适当的DOCTYPE（例如<!DOCTYPE html>）并验证您的页面，其中包含错误。

http://validator.w3.org/check?uri=http%3A%2F%2Fmpreview.ami.co.nz%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

IE7 float right导致父元素占据全宽

3 个答案: