Проблема
При создании сайтов с «резиновым» дизайном, нескольких колонок с текстом, везде, где есть необходимость задавать ширины элементов в процентах — технических дизайнеров мучил один очень неприятный баг Internet Explorer 6.
Этот браузер, при получении дробных значений ширины, округляет числа в большую сторону.
В итоге, при изменении размера видимой области сайта, сумма ширин становилась больше 100%, что приводило к прыгающим блокам.
Вообще, это проблема всех браузеров и каждый с ней «борется» по разному. Но, только у IE6 сумма ширин становиться больше ширины родительского блока.
Об актуальности проблемы говорит, хотя бы тот факт, что на сайте «Студия Артемия Лебедева» есть три(1, 2, 3) способа решения данной проблемы.
Решение
Хочу предложить свой, как мне кажется, более универсальный способ решения этой проблемы.
После многочисленных экспериментов, родилось решение.
Если вкратце, то пришлось отказаться от свойстваfloat: left;и заменить его на display: inline-block;. Весь остальной код — это следствия этого изменения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .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:
1 2 3 4 5 | .column-1, .column-2 { display: inline; /* IE display: inline-block */ zoom: 1; /* emulation */ } |
И html-код:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="columns"> <div class="column-1"> <div class="column-content"> <p>Column width 30%.</p> </div> </div><!-- no spaces between div here (for IE8) --><div class="column-2"> <div class="column-content"> <p>Column width 70%</p> </div> </div> </div> |
Тестировалось в следующих браузерах:
- Internet Explorer 6/7/8
- Mozilla Firefox 3
- Safari 4
- Google Chrome
- Opera 10
Люблю использовать display:inline-block. Только с ним есть 2 проблемы:
1. Не поддерживается ФФ2 (думаю он скоро отомрет).
2. Проблемы разного характера в Опере 9+. Например с position:absolute.
А так все почти прекрасно :).
я б тут добалил, что это нужно для всех браузеров, а не только ИЕ8, поскольку будет зазор между блоками.
это я про коментарий: no spaces between div here (for IE8)