Учим IE7 и IE6 понимать CSS свойство box-sizing:border-box

Давно не занимался вёрсткой, но вот было время и решил сделать один макет по настоящему кроссбраузерно, с поддержкой динозавров IE7 и IE6.

Среди прочего, пришлось бороться с непониманием 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.

Решение «в лоб» и, наверняка, не лишено недостатков, любая конструктивная критика категорически приветствуется.