IE7 не играет хорошо с моей плавающей боковой панели - PullRequest
Новая
       17

IE7 не играет хорошо с моей плавающей боковой панели

5 голосов
/ 05 июня 2009

Я пытаюсь заставить динамически изменяющуюся боковую панель плавать в верхней правой части моих веб-страниц (но ниже заголовка и навигации), и чтобы основное содержимое страницы плавало вокруг нее (вроде «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, который меня не волнует), основной контент перемещается вниз под нижнюю часть боковой панели, как если бы там было «clear: left» в div боковой панели (но его нет) .

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

Есть идеи? ТИА.

Ответы [ 3 ]

2 голосов
/ 05 июня 2009

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

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

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

0 голосов
/ 05 июня 2009

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

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

0 голосов
/ 05 июня 2009

Из того, что вы описываете, звучит так, будто ваша боковая панель ведет себя так, как будто это элемент блока. Может быть, попробуйте другие варианты отображения, такие как встроенный блок. Я также попробовал бы поэкспериментировать с атрибутами ширины и ширины. Трудно сказать, хотя.

...