Какая часть этого CSS-дизайна тикает с IE?

Question

Отказ от ответственности: Я неоднократно обсуждал эту проблему в своей голове, но у меня есть подозрение, что я просто упускаю что-то очевидное.

Я пытался создать макет из двух столбцов с помощью CSS, где левый столбец предназначен для навигации (не удерживайте вертикальную навигацию против меня), а правый столбец - для содержимого. Длина содержимого варьируется, но всегда длиннее, чем в правой колонке навигации. Я также стремлюсь, по крайней мере, к грациозной деградации в <= IE7 и без JavaScript, если смогу помочь. </p>

Я вижу, что есть другие вопросы , которые направлены на нечто похожее, и именно так я нашел эту статью .

После попытки применить мой дизайн я нашел что-то, что, как я думал, будет работать.

jsfiddle здесь: http://jsfiddle.net/FVsSV/2/

Соответствующий HTML:

    <div id="mainCont">
    <div id="sidebar">
        <a href="#">dapibus sit a</a>
        <a href="#">dapibus sit a</a>
        <a href="#">dapibus sit ag</a>
        <a href="#">dapibus sit a</a>
        <a href="#">dapibus sit a</a>
        <a href="#">dapibus sit a</a>
        <a href="#">dapibus sit a</a>
    </div>
    <div id="content">
        <div id="padding-wrapper">
            <h1>uris et lorem gravida condiment</h1>

            <h3 id="toc">apibus sit am</h3>
                Content content content...
        </div>
    </div>
    </div>

Соответствующий CSS:

#mainCont {
  background-color: #000;
  overflow: hidden;
  padding-left: 148px; /* The width of the rail */
  height:1%; /* So IE plays nice */
}



#sidebar {
    display: inline;
  background-color: #9BBCE4;
  width: 148px;
  float: left;
  margin-left: -148px;
}


#sidebar a {
    display: block;
    padding: 15px 0px;
    font-size: 1.1em;
    text-align: center;
    color: #2C2C2C;
    text-decoration: none
}

#sidebar a:hover {
    background-color: #4e88ce;
    color: #FFFFFF;
}

#content{
    background-color: #FFFFFF;
  width:100%;
  border-left: 148px solid #9BBCE4;
  margin-left:-148px;
}

#padding-wrapper {
    padding: 30px 30px;
}

/* content formatting*/
#content h1 {
    font-size: 1.5em;
    margin: 15px 0px 20px 0px;
}

/* content formatting END*/

В FF8 и IE8 он выглядит просто отлично, но когда я проверил его в IE 7 и в «представлении о совместимости», он выглядел довольно испорченным, и я не уверен, в чем причина или ее легко устранить.

Что-то очевидно, что мне не хватает, или этот метод не стоит пробовать для совместимости с IE6-7?

Answer 1

Я думаю, что вы можете просто удалить width: 100% на #content, и он будет отлично работать в IE7 (и других браузерах).

Answer 2

Я считаю, что это связано с тем, как IE7 обрабатывает определенную ширину и отрицательные поля. Поправьте меня, если я ошибаюсь, но IE7 не страдает от тех же проблем с блочной моделью, что и IE6, но все равно не совсем правильно. (Может быть, у есть такая же проблема с блочной моделью, и это является ее проявлением?) Когда вы устанавливаете отступ для контейнера (как у вас с padding-left:148px), IE7 неправильно добавляет это относительная ширина, используемая дочерними объектами. Затем, когда вы устанавливаете дочерний объект с width:100%, вы получаете дочерний объект, который слишком широк, чтобы поместиться в пространство, предоставленное родителем.

Поскольку sidebar появляется первым в HTML и всплывает, content должен обтекать его, но, поскольку IE7 считает, что он слишком широк для контейнера, он переносит его на первую строку после плавающего объекта. @Scott верен - если вы удалите width:100% из правила CSS для div content, он будет корректно работать в IE7. (Хотя я не могу лично проверить это в IE6.)

Из этого, конечно, следует извлечь уроки (помимо головной боли от работы с IE), что отрицательные поля могут вызывать некоторые странные действия, и их, вероятно, следует избегать в большинстве сценариев. Однако, учитывая сказанное, ваш подход к макету из двух столбцов с фоном более короткого столбца, совпадающим с высотой более длинного столбца, интригует.