Давно не занимался вёрсткой, но вот было время и решил сделать один макет по настоящему кроссбраузерно, с поддержкой динозавров IE7 и IE6.
Среди прочего, пришлось бороться с непониманием IE свойства box-sizing:border-box. Что это такое и зачем оно нужно, рассказано, например, в этой статье.
Далее речь о том, как научить IE7 и IE6 в standart mode отображать страницу, как если бы они тоже понимали это свойство.
Для проблемы уже есть решение box-sizing-polyfill, но оно:
Побившись полчаса в попытках заставить корректно работать boxsizing.htc, бросил эту идею и написал свой небольшой скрипт на jQuery.
Недостаток алгоритма — не учитывается border-width, но границы часто не используются. Зато он корректно отрабатывает любые значения отступов — и в абсолютных, и в относительных величинах.
Естественно, скрипт запускаем только для IE6/7.
Решение «в лоб» и, наверняка, не лишено недостатков, любая конструктивная критика категорически приветствуется.
Среди прочего, пришлось бороться с непониманием IE свойства box-sizing:border-box. Что это такое и зачем оно нужно, рассказано, например, в этой статье.
Далее речь о том, как научить IE7 и IE6 в standart mode отображать страницу, как если бы они тоже понимали это свойство.
Для проблемы уже есть решение box-sizing-polyfill, но оно:
- у меня глючит (возможно, из-за винегрета других библиотек и обилия CSS3)
- реализовано в виде .htc файла, что не позволяет подключить PIE.htc аналогичным способом
Побившись полчаса в попытках заставить корректно работать boxsizing.htc, бросил эту идею и написал свой небольшой скрипт на jQuery.
Идея
- Перебираем элементы страницы и выбираем те из них, для которых заданы box-sizing:border и ненулевой padding
- Контент внутри этих элементов оборачиваем блоком div с соответствующими отступами
- Зануляем padding первичных элементов
Недостаток алгоритма — не учитывается border-width, но границы часто не используются. Зато он корректно отрабатывает любые значения отступов — и в абсолютных, и в относительных величинах.
Реализация
$("*:not(.box-model-fix)").each(function()
{
if( $(this).css('box-sizing') == 'border-box' && $(this).css('padding').replace(/[^-\d\.]/g, '').toInt() > 0 )
{
$(this).wrapInner('<div class="clearfix box-model-fix" style="padding:'+ $(this).css('padding')+';" />');
$(this).css('padding', '0');
}
});
Естественно, скрипт запускаем только для IE6/7.
Решение «в лоб» и, наверняка, не лишено недостатков, любая конструктивная критика категорически приветствуется.