Смещение на 1px в IE6
Проблема
В IE6 элемент с абсолютным позиционированием (position: absolute) смещается на 1px при использовании координат right: 0 и/или bottom: 0. Например нам нужно сделать блок со скругленными углами. Блок у нас резиновый. Поэтому правый нижний угол имеет такие стили:
.cornerRightBottom {
position: absolute;
right: 0;
bottom: 0
}
 в нормальных браузерахвсе нормально |
 В IE6 есть смещение на 1px |
При разной ширине (высоте) родительского блока IE6 понимает right: 0 (bottom: 0) по разному —
- при ширине (высоте) равной нечетному значению right: 0 (bottom: 0) = right: 1px (bottom: 1px)
- при ширине (высоте) равной нечетному значению right: 0 (bottom: 0) = right: 0 (bottom: 0)
Решение
Для IE6 используем expression, котрое вычисляет ширину (высоту) родительского блока и в зависимости от четности значения подставляет координаты -1px или 0.
.cornerRightBottom {
position: absolute;
right: 0;
bottom: 0
}
* html .cornerRightBottom {
righty:expression(parentNode.offsetWidth % 2 ? style.right="-1px" : style.right="0px");
bottomy:expression(parentNode.offsetHeight % 2 ? style.bottom="-1px" : style.bottom="0px");
}
righty и bottomy — выдуманные свойства, т.к. при использовании right и bottom браузер может подвисать.
Недостатки:
- использование expression замедляет работу браузера
- не проходит валидацию
Данный прием имеет смысл применять только для резиновых блоков, когда нельзя заранее знать точные размеры родителя. При жестко фиксированных размерах разумнее будет прописать просто right (bottom) 0 или -1px в зависимости от заданных ширины и высоты родительского блока.