Проблема
При создании сайтов с «резиновым» дизайном, нескольких колонок с текстом, везде, где есть необходимость задавать ширины элементов в процентах — технических дизайнеров мучил один очень неприятный баг Internet Explorer 6.
Этот браузер, при получении дробных значений ширины, округляет числа в большую сторону.
В итоге, при изменении размера видимой области сайта, сумма ширин становилась больше 100%, что приводило к прыгающим блокам.
Вообще, это проблема всех браузеров и каждый с ней «борется» по разному. Но, только у IE6 сумма ширин становиться больше ширины родительского блока.
Об актуальности проблемы говорит, хотя бы тот факт, что на сайте «Студия Артемия Лебедева» есть три(1, 2, 3) способа решения данной проблемы.
Решение
Хочу предложить свой, как мне кажется, более универсальный способ решения этой проблемы.
После многочисленных экспериментов, родилось решение.
Если вкратце, то пришлось отказаться от свойства float: left; и заменить его на display: inline-block;. Весь остальной код — это следствия этого изменения.
.columns {
width: 100%;
overflow: hidden; /* to hide horizontal scrollbar */
white-space: nowrap; /* disable inline blocks wrapping */
}
.column-1,
.column-2 {
display: inline-block; /* display columns as inline blocks */
vertical-align: top; /* vertical aligment to top */
}
.column-1 { width: 30%; background: #faa; }
.column-2 { width: 70%; background: #afa; }
.column-content {
padding: 1em;
white-space: normal; /* restore normal text wrapping inside */
}
Для Internet Explorer 6/7:
.column-1,
.column-2 {
display: inline; /* IE display: inline-block */
zoom: 1; /* emulation */
}
И html-код:
Column width 30%.
Column width 70%
Тестировалось в следующих браузерах:
- Internet Explorer 6/7/8
- Mozilla Firefox 3
- Safari 4
- Google Chrome
- Opera 10