Почему мой базовый макет CSS неправильно отображается в Internet Explorer? - PullRequest
Новая
       0

Почему мой базовый макет CSS неправильно отображается в Internet Explorer?

0 голосов
/ 31 июля 2011

Итак, я экспериментирую с чистыми макетами CSS, и сразу же я застрял.У меня есть следующие HTML и CSS: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Layout</title>
        <link type="text/css" href="site.css" rel="stylesheet" >
    </head>
    <body>
        <div id="header">
            <a href="#" id="logo">My Site</a>

            <div id="search-area">
                <form>
                    <input type="text" id="search-box" />
                    <input type="submit" value="Search" />
                </form>
            </div>
        </div>

        <div id="sidebar">
            Account Name <br>
            <a href="#">Edit My Account</a>

        </div>
    </body>
</html>

#header {
    background-color: #151B54;
    height: 30px;
    width: 100%;
}

#logo {
    position: relative;
    left: 10px;
    color: white;
    font-size: x-large;
    font-weight: bold;
    text-decoration: none;
    float: left;
    margin-top: 3px;
}

#search-area {
    position: absolute;
    left: 200px;
    margin-top: 3px;
}

#sidebar {
    float: left;
    width: 100px;
    border-right: double;
}

Когда я смотрю это в Chrome, я получаю рендеринг, который я ожидал:

Обратите внимание, что слева от боковой панели есть массивная пустая область.Почему это отображается в IE?

Ответы [ 2 ]

3 голосов
/ 31 июля 2011

У меня та же проблема в Safari и по той же причине: вы не очищаете свои поплавки в #header, а #header не достаточно высок, чтобы вместить всех его всплывающих дочерних элементов.

Если вы увеличите высоту заголовка до 31px, вы должны (но, возможно, нет) получить желаемый макет.Лучшим подходом является добавление overflow: hidden в качестве четкого исправления, которое сделает все дочерние элементы #header полностью содержащими #header, и это помешает им мешать расположению следующей части: 

#header {
    background-color: #151B54;
    height: 30px;
    width: 100%;
    overflow: hidden;
}

Живой пример: http://jsfiddle.net/ambiguous/EUmyN/

Практическое правило с плавающими элементами - всегда проверять, очищены ли они с помощью overflow: hidden в их контейнере или, при необходимости, с явным <div style="clear: both;"></div> внизу контейнера.

Кроме того, пока мы здесь, вам редко требуется width: 100% для элемента блока, такого как <div>.Если вы позиционируете это или плаваете, то, возможно, вам понадобится что-то подобное, но не для простого <div>;элементы блока по умолчанию имеют полную ширину.

0 голосов
/ 31 июля 2011

Попробуйте очистить онлайн-кеш.Часто файл css кэшируется и использует более старую версию, вызывающую такой тип поведения.

Может не быть проблемой, но первое действие, которое вы должны предпринять, пытаясь устранить непредвиденные результаты по стилю.

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

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

...