IE7 неправильно отображает мою страницу - PullRequest
Новая
       2

IE7 неправильно отображает мою страницу

1 голос
/ 23 августа 2011

У меня есть страница , которая прекрасно работает во всех протестированных мной браузерах, кроме 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 отображает его

Ответы [ 5 ]

2 голосов
/ 23 августа 2011

Попробуйте структурировать ваш 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, вы сможете держать их в том же порядке в разметке. Кроме того, добавление пустого div с классом clear останавливает распространение правила float на другие непреднамеренные элементы (что, вероятно, является причиной проблемы, которую вы видите).

Так что, как правило, всегда добавляйте пустой div с символом clear: оба как последний элемент из всех всплывающих элементов. Кроме того, попробуйте придерживаться плавающего в одном направлении. Смешивание с плавающей точкой: левые / права как братья и сестры могут вызвать странный / противоречивый рендеринг в разных браузерах.

2 голосов
/ 23 августа 2011

вы можете проверить действительный HTML на W3C сайте

0 голосов
/ 23 августа 2011

Попробуйте обернуть ваши 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; }
0 голосов
/ 23 августа 2011

Убедитесь, что в верхней части страницы указан 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">
0 голосов
/ 23 августа 2011

Когда вы объявляете число с плавающей точкой, вы отменяете свои display: inline Плавающие элементы имеют display: block. Это может быть частью этого.

Поскольку все элементы имеют фиксированную ширину, вы можете попробовать расположить их по порядку слева, по центру, справа и задать им все float: left

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...