Боксовая модель в IE6
До выхода 7 эксплорера MS использовал свою, неправильную, но кое-как более интуитивную боксовую модель. Ширина и высота контентной области блока включала в себя и внутренние отступы, в то время как W3C стандарты предписывали считать их отдельно. То есть, элемент типа:
div
{
width: 100px;
height: 100px;
padding: 25px;
}
в IE6 занимал бы места как квадрат 100 на 100 пикселей, у которого под контент отводился бы квадрат 50 на 50 пикселей. А по W3C стандартам он бы занимал область 150 на 150 пискелей, с отведёнными 100 на 100 пикселей под контент, что в общем более разумно, но не интуитивно :). Обычно такая проблема решалась следующим образом:
div
{
width: 150px;
height: 150px;
padding: 25px;
max-width: 100px;
max-height: 100px;
}
Учитывая то, что до 7 версии экплорер не знал ни про max-width ни про max-height, то получался идентично выглядящий элемент во всех браузерах.
Однако, как выяснилось (выяснилось то давно на самом деле, просто я недавно столкнулся с этим), IE6 умеет переключаться в W3C боксовую модель. Не знаю про html, поскольку не имею с ним дела, но как минимум для xhtml (ключевой момент здесь - указание правильного DOCTYPE, именно оно переключает боксовую модель) IE6 использует W3C box model.
Всё бы хорошо, если б не существование IE5.5 и IE5, с которыми до сих пор приходится считаться. Вот тут встала проблема идентификации через CSS версий эксплорера. После недолгих поисков была найдена комбинация магических хаков, которые валидны только для IE5.5- (а сам css продолжает оставаться валидным для W3C). А именно, следующий код:
div
{
width: 100px;
height: 100px;
padding: 25px;
}
* html div
{
width /**/: 150px;
height /**/: 150px;
}
позволяет получить идентично выглядящий элемент во всех* браузерах.
---------------
* - не проверялось на вещах типа Konqueror или IE под мак.