Question

我有这个page在我测试的所有浏览器中呈现出色，除了IE7

这是我的相关HTML

<div class="col col-left">
    .....
    .....
</div>

<div class="col col-right">
    .....
    .....
</div>

<div class="col col-middle">
    .....
    .....
</div>

和CSS ...

.col-left {
    display: inline;
    float: left;
    margin-left: 10px;
}
.col-left, .col-right {
    width: 186px;
}
.col-right {
    display: inline;
    float: right;
    margin-right: 10px;
}

.col-middle {
    display: inline;
    float: left;
    margin-left: 7px;
    width: 559px;
}

IE7中的中间div .col-middle落到了底部而不是中间的问题就像在ie8和firfox和chrome中一样。任何想法为什么IE7显示它

Answer 1

您可以在W3C site

检查有效的HTML

Answer 2

尝试像这样构建你的html：

<div class="col col-left">
    .....
    .....
</div>

<div class="col col-middle">
    .....
    .....
</div>

<div class="col col-right">
    .....
    .....
</div>
<div class="clear"></div>

用这样的css：

.col-left {
    margin-left: 10px;
}

.col-left, .col-right {
    width: 186px;
}

.col-right {
    margin-right: 10px;
}

.col-middle {
    margin-left: 7px;
    width: 559px;
}

.col {
    float: left;
}

.clear {
    clear: both;
}

在IE7中浮动一直很棘手。只需将您想要的所有列放在同一行float: left上，就可以使它们在标记中保持相同的顺序。此外，使用clear类添加空div会阻止浮动规则传播到其他非预期的元素（这可能是您遇到的问题的原因）。

因此，作为一般规则，总是添加一个带有clear的空div：两者都是任何浮动元素的最后兄弟。另外，尝试坚持向一个方向浮动。混合float：lefts / rights作为兄弟姐妹可能会在浏览器中引起奇怪/不一致的呈现。

Answer 3

当您声明浮动时，取消display: inline Floated elemenets display: block。这可能是其中的一部分。

由于所有元素都有固定的宽度，你可以尝试按顺序，左，中，右，并给它们全部float: left

Answer 4

确保页面顶部有DOCTYPE !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Answer 5

尝试将div列包裹在另一个div列中，以便包含列，例如http://jsfiddle.net/F8VVW/1/

<div class="wrapper">
    <div class="col col-left">
        .....
        .....
    </div>

    <div class="col col-right">
        .....
        .....
    </div>

    <div class="col col-middle">
        .....
        .....
    </div>
</div>

...

.col-left {
    display: inline;
    float: left;
    margin-left: 10px;
}
.col-left, .col-right {
    width: 186px;
}
.col-right {
    display: inline;
    float: right;
    margin-right: 10px;
}

.col-middle {
    display: inline;
    float: left;
    margin-left: 7px;
    width: 559px;
}

.wrapper { width: 1000px; }

IE7正在渲染我的页面错误

5 个答案: