Проблемы точного позиционирования

Если вам доводилось с помощью CSS позиционировать на странице элементы, то вы могли заметить, что Internet Explorer 5 PC некорректно реализует рекомендации W3C в плане «боксовой» модели. Этот браузер не добавляет значения ширины border и padding к значениям width и height (как того требует спецификация), а вычитает их из width и height. В результате, в Internet Explorer 5 PC элементы выглядят иначе, чем в Internet Explorer 5 Mac, Gecko (Netscape Navigator 6, Mozilla), Konqueror или Opera 5.

До появления Internet Explorer 6, следующий «финт ушами», использующий дочерний селектор (child selector) из CSS Level 2, спасал положение:

#mydiv {
border:10px solid black;
width:200px /* неправильная ширина (для IE5 PC) */
}
html>body #mydiv { /* использование дочернего селектора (CSS2) — IE5 PC его не воспринимает */
width:180px /* а это правильная ширина (для IE5 Mac, Gecko и Opera) */
}

В Internet Explorer 6 ситуация с «боксовой» моделью исправилась, но трюк нужен уже другой, так как Internet Explorer 6 всё равно не признаёт дочерние селекторы :-(. К счастью, нашелся такой человек, как Tantek Celik, который предложил такой выход из положения:

#mydiv {
border:10px solid black;
width:200px; /* неправильная ширина (для IE5 PC) */
voice-family:"\"}\""; /* тут CSS «парсеры» в IE5 PC и Opera 5 «загибаются» */
voice-family:inherit;
width:180px /* а это правильная ширина (для IE5 Mac, IE6 и Gecko)*/
}
html>body #mydiv { /* нужно оставить для Opera 5 */
width:180px /* тоже правильная ширина */
}

Получается, что браузеры совершенствуются, а баги и несоответствия, тем не менее, остаются…