.test {
    border-color: /* старое значение */ green;
}

Блок с классом test будет иметь рамку зеленого цвета во всех браузерах. А в ИЕ (как минимум в 6 и 7 версиях) значение будет взято по умолчанию (т.е. из свойства color), т.е. данное правило игнорируется. Не знаю, чем объяснить данное поведение, причем достаточно комментарий придвинуть поближе к двоеточию или значению цвета – и все работает. Быстренько накидал тестовую страничку с разнообразными расположениями комментариев и отправил на browsershots. Дополнительно выяснилось, что адекватные браузеры пропускают только случаи, когда комментарий находится внутри имени свойства или его значения (что в принципе логично). Если говорить про ИЕ, то он по какой-то неведомой причине нормально обрабатывает варианты типа

border-color: gre/*123*/en;

В общем, получается эдакий странноватый ИЕ6-7 хак В Гугле ничего по этому поводу не нашел, или все-таки баян древний, как сам ИЕ6?

Решение довольно простое, в чем можно убедиться здесь.

Задача

Суть в том, что две колонки создаются без float‘а, одинаковая высота достигается за счет очень любопытного способа – применение border‘ов для wrapper‘а (далее называем его по имени класса .middle) и контента, соответственно border ставится с той стороны, где лежит sidebar. Естественно, хочется сделать и три колонки В качестве исходной разметки берем такое расположение блоков:

<div class="header"><p>Header</p></di v>
<div class="middle">
<div class="content">
<p class="expand"><a href="#">Делаем колонку длиннее</a></p>
<p>Center</p>
</div>
<div class="left">
<p class="expand"><a href="#">Делаем колонку длиннее</a></p>
<p>Left</p>
</div>
<div class="right">
<p class="expand"><a href="#">Делаем колонку длиннее</a></p>
<p>Right</p>
</div>
</div>

Ссылки позволяют динамически увеличить высоту одной из колонок, дабы проверить изменение высоты (чисто визуальное, блоки не увеличиваются) остальных. По мотивам битвы с позиционированием автор написал пост ‘IE7 самый “крутой”‘, в котором описан ряд проблем, связанных со взаимным расположением уже двух колонок вокруг третьей – контента. Решил поэкспериментировать и я. И вот что получилось.

Как жить без float’а?

Если делать все согласно двухколоночной версии поста Gordi, получается Пример1. Очевидно, что без обтекания решение вряд ли будет найдено. Поэтому к левой колонке приписываем float:left; По крайней мере теперь колонки более-менее на одной линии. Дописываем overflow:hidden для middle и колонок. Вроде бы все работает, но в ИЕ почему-то правая колонка все еще съезжает вниз. Тут мы вспоминаем о баге в ИЕ: после блока с float:left возникает смещение в 3 пикселя. Так как у нас сейчас ширина middle точно равна сумме left и right, то эти три пикселя нам как палка в колесе. Решение просто – для ИЕ применяем star-хак:

* html .left {
   margin-right: -3px;
}

и все работает (Пример 2).

Новые проблемы

Остается проблема с “выпадением” левой колонки – при увеличении размера левой колонки остальные не подтягиваются, причем в ИЕ6 все хорошо (всегда бы так!). Первая мысль – добавить после колонок дополнительный блок с clear:left. Это поможет, но получим лишний блок, который невозможно будет использовать, т.к. он будет перекрываться content‘ом. Немного подумав, применяем эту же идею, но в другой обертке:

.middle:after {
   content: "";
   display: block;
   clear: left;
}

Теперь и в других браузерах middle охватывает все три колонки (Пример 3). Вот только что делать с footer‘ом? Прибить к низу страницы пока что не представляется возможным.

Попутно

Как обычно и бывает, во время экспериментов часто возникают интересные эффекты. Как вам такой?

Закругляемся

В общем, получается любопытный трехколоночный макет, правда без footer’а. Ближайшая цель – “колупание” кода с целью создания резинового content’а. Спасибо Gordi за весело (а главное полезно!) проведенное время.