IE7 is rendering my page wrong_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-30 07:20 出处：网络

I have this page which renders great in all the browsers that I have tested except for IE7 here is my relevant HTML

I have this page which renders great in all the browsers that I have tested except for IE7

here is my relevant HTML

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

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

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

and the 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;
}

The problem that in IE7 the 开发者_StackOverflowmiddle div .col-middle is falling to the bottom and not in the middle like it is in ie8 and firfox and chrome. ANy ideas why IE7 is displaying it off

you can check for valid HTML at the W3C site

Try structuring your html like this:

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

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

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

With css like this:

.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;
}

Floating has always been tricky in IE7. Just giving all of the columns you want to be on the same row float: left allows you to keep them in the same order in your markup. Also, adding the empty div with the clear class stops the float rule from propagating to other, unintended elements (which is likely the cause of the problem you're seeing).

So, as a general rule, always add an empty div with a clear:both as the LAST sibling of any floated elements. Also, try sticking to floating in one direction. Mixing float: lefts/rights as siblings is likely to cause weird/inconsistent rendering across browsers.

When you declare a float, you cancel your display: inline Floated elemenets have display: block. That might be part of it.

As all the elements have fixed width, you might try having them in order, left, middle , right, and giving them all float: left

Make sure you have the DOCTYPE at the top of your page!!

<!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">

Try wrapping your div columns in another div wide enough to contain the columns, e.g. 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; }