Page 100 - Сила CSS3 Освой новейший стандарт

100 • Глава 2. Облачка с текстом

.ie8 .comment-meta img {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917454, M12=0.08715574274765871,
¬ M21=-0.08715574274765871, M22=0.9961946980917454,
¬ SizingMethod=’auto expand’)";
margin-left: -11px;
margin-top: -11px;
}

Если вы сохраните страницу и откроете ее в IE, то обнару-
жите, что все прекрасно работает в IE 7, но в IE 6 верхушки
изображений обрезаются, а в IE 8 изображения немного
перекрывают имена комментаторов (рис. 2.27).
Причина проблемы в IE 6 заключается в отрицательных зна-
чениях полей изображений — когда изображение выходит
за пределы поля, IE 6 не отображает «лишние» фрагменты.
Для того чтобы исправить ситуацию, добавьте к правилу для
IE 6 и 7 строку position: relative:

.ie6 .comment-meta img, .ie7 .comment-meta img {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917454,
M12=0.08715574274765871,
M21=-0.08715574274765871,
M22=0.9961946980917454,
SizingMethod=’auto expand’);
margin-left: -11px;
margin-top: -11px;
position: relative;
Рис. 2.27. В IE 8 пово- }
рот изображений вы-
полняется правильно, В IE 8 проблема с наложением возникает из-за того, что
но аватары немного отрицательные значения полей не согласуются с другими
перекрывают имена стилями, использующимися на странице. Давайте применим
комментаторов для размещения изображений относительное позициониро-
вание, а не настройку полей:

.ie6 .comment-meta img, .ie7 .comment-meta img {
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917454,
M12=0.08715574274765871,
M21=-0.08715574274765871,
M22=0.9961946980917454,
SizingMethod=’auto expand’);
position: relative;
top: -5px;
left: -5px;
}

www.trk.kg