IE 6-7 толкает вниз плавающий div

0

У меня возникла проблема при тестировании моего сайта в IE7. У меня есть 2 контейнера, которые, как предполагается, будут плавать рядом друг с другом. Он отлично работает в современных веб-браузерах, но в старых версиях IE правый контейнер подталкивается под левый. Может ли кто-нибудь увидеть проблему? Основной контейнер имеет ширину 1000 пикселей. Вот код для двух разделов:

#content {
    width: 725px;
    float: left;
    margin: 0 25px 25px 0;
    clear: both;
}

#SideBar {
    width: 225px;
    min-height: 500px;
    float: left;
    margin: 0 0 50px 25px;
}

    #SideBar img {
        display: table;
        margin: 20px auto 0 auto;
        border: 0;
    }

Здесь html:

<div id="PageWrapper">
<nav id="MainMenu">
</nav>
<header id="Header">
</header>
<section id="PageSlider">

<div id="content">

</div>
</section>
<aside id="SideBar">

</aside>
</div>

U можно посмотреть на веб-сайте ashbaines.com

Веб-сайт адаптирован для распознавания тегов html5.

благодаря

  • 3
    Очевидный первый вопрос: действительно ли вам нужна поддержка IE6 / 7?
  • 0
    @Spudley - только на IE6 приходится 5% по всему миру ( ie6countdown.com ), но это в основном в Китае, поэтому это может зависеть от вашего целевого рынка.
Показать ещё 3 комментария
Теги:
internet-explorer

2 ответа

0

В старых версиях IE есть ошибка с большими полями. Попробуйте установить плавающие элементы в "display: inline;"

Вот некоторые сведения об этой ошибке: http://www.positioniseverything.net/explorer/floatIndent.html http://www.positioniseverything.net/explorer/doubled-margin.html

Поделиться
0

сначала измените свой код, потому что вы используете тег html5 такой как nav, header, section и в aside который не поддерживается старыми browers, например ie7, ie8. поэтому мое предложение изменить код, а затем попробовать.

посмотрите на этот код

<div id="PageWrapper">
  <div id="MainMenu">

  </div>
  <div id="Header">

  </div>
  <div id="PageSlider">
     <div id="content">

      </div>
  </div>
  <div id="SideBar">

  </div>
</div>
Поделиться
  • 0
    Я использовал html5shiv для визуализации объекта для старых веб-браузеров, но проблема все еще сохраняется
  • 0
    ваш тег <aside> находится вне вашего тега <section>, поэтому поместите свой тег <aside> в тег <section> после своего идентификатора содержимого div
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню