IE7 плохо справляется с моей плавающей боковой панелью

Я пытаюсь заставить боковую панель динамического размера плавать в верхней правой части моих веб-страниц (но под заголовком и навигацией), а основное содержимое на странице обтекает ее (как бы в форме буквы "L", за исключением при этом нижняя часть буквы "L" действительно толстая). Ширина и высота боковой панели будут варьироваться от страницы к странице, поэтому я не могу использовать какие-либо жесткие значения.

Мой css выглядит так:

#main {
    width: 850px;
    height: auto;
}

#sidebar {
    width: auto;
    float: right;
}

(плюс некоторые отступы, поля и цветовой код фона, я считаю несущественным)

Мой html выглядит так:

<div id="wrapper">  
    <div id="header">    /* header stuff */    </div>  
    <div id="nav">       /* nav stuff */       </div>  

    <div id="sidebar">  
        /* my sidebar content, really just an h3 and a ul */
    </div>

    <div id="main">
        /* lots of content here */
    </div>
</div>

Я не совсем понимаю, почему мне сначала нужен div боковой панели, но этот код отлично работает в FF, Chrome, Safari (Windows) и IE8. Но в IE7 (и IE6, который меня не волнует) основной контент перемещается ниже нижней части боковой панели, как если бы в div боковой панели было «clear: left» (но его нет) .

У меня такое чувство, что это одна из тех злобных ошибок несоответствия IE7, особенно потому, что IE8 ведет себя точно так же, как другие браузеры. Но я не знаю, как это исправить.

Любые идеи? TIA.


browser css css-float internet-explorer-7
person user249493    schedule 05.06.2009    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Во-первых, убедитесь, что вы используете doctype, который переводит IE7 в строгий режим (см. http://hsivonen.iki.fi/doctype/ для объяснения). если этого не происходит, возможно, вам нужно немного изменить ширину полей.

Причина, по которой вы должны сначала иметь div боковой панели, заключается в том, что div отображается как элемент блока, все, что после него, будет ниже него (если вы не разместите основной div).

Размещая div на боковой панели и помещая его первым, браузер знает, что может отображать основной div справа от боковой панели. Вы можете получить аналогичный эффект, добавив float влево к основному div и удалив float из div боковой панели и переместив его после основного div.

person Robert Groves    schedule 05.06.2009
comment
Мой тип документа: ‹! DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ›Спасибо за объяснение порядка в div. - person user249493; 05.06.2009

arrow_upward
0
arrow_downward

Судя по тому, что вы описываете, ваша боковая панель ведет себя так, как будто это блочный элемент. Возможно, попробуйте другие варианты отображения, например, встроенный блок. Я бы также попробовал поэкспериментировать с атрибутами width min-width. Хотя трудно сказать.

person Rob    schedule 05.06.2009

arrow_upward
0
arrow_downward

Бинго! Фиксированный! Парни, которые упомянули об игре с шириной и полями, сегодня получат золотые звезды. Оказалось, что все, что мне нужно было сделать, это удалить фиксированную ширину в основном div, а затем добавить отступ справа, чтобы создать желоб для текста и изображений. Протестировано и подтверждено в FF3, Chrome, Safari (Win) и, что наиболее важно, в IE6 и IE7 (хотя я все еще ненавижу IE).

Я предполагаю, что движок рендеринга IE говорил: «Я вижу, что вы хотите, чтобы ваш главный div был шириной 850 пикселей, но с той боковой панелью, которую вы там застряли, у меня нет места, поэтому мне придется засунуть ее под боковую панель» . Конечно, любой другой движок рендеринга браузера сказал: «Чувак, я полностью понимаю, что ты пытаешься сделать! Нет проблем, я выложу все именно так, как ты хочешь».

person user249493    schedule 05.06.2009