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

Question

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

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

Я вижу, есть otherquestions, которые направлены на несколько похожие вещи, и вот как я нашел this article.

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

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

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

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

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

Answer 2

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