dximagetransform.matrix, абсолютно позиционирует дочерние элементы, не вращающиеся в стандартном режиме IE 8 - PullRequest
Новая
       34

dximagetransform.matrix, абсолютно позиционирует дочерние элементы, не вращающиеся в стандартном режиме IE 8

3 голосов
/ 16 июня 2010

Я просмотрел дополнительную информацию по этому вопросу и хотел бы знать, почему это происходит.

Вот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0.15044199698646263, M22=0.9886188373396114);">
        <div style="position:absolute; top:10px; left:10px; border:1px solid darkblue;">
            I do not rotate in IE 8.
        </div>
    </div>
</body>
</html>

Проблема в том, что абсолютно или относительно позиционированные элементы в div, которые были повернуты с использованием dximagetransform.matrix от MS, не наследуют преобразование в IE 8.

IE 6 и 7 отображаются правильно, и я могу решить проблему IE8, запустив режим совместимости, но я бы предпочел этого не делать.У кого-нибудь есть опыт с этим?Я использую css3 transform в других браузерах и использую dximagetransform.matrix для достижения этого эффекта в IE.

EDIT: добавлен открывающий тег html.Проблема все еще существует.

http://i45.tinypic.com/nf4gmq.png

Ответы [ 2 ]

21 голосов
/ 07 июня 2011

Я решил это magicaly просто добавив z-index: 1 к родительскому элементу с матричным фильтром. Ну, любой z-index должен работать.

2 голосов
/ 17 июня 2010

Я думаю, что абсолютная позиция останавливает фильтр от наследования.Я обнаружил то же самое, когда недавно экспериментировал с фильтрами размытия, за исключением того случая, когда я хотел, чтобы фильтры перестали наследовать.Я не знал, что IE8 отличается от IE6 / 7 в этом отношении.

Это тот эффект, который вы пытаетесь получить?

Поверните в IE8, используя маржу вместо позицииhttp://www.boogdesign.com/images/external/rotate.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0.15044199698646263, M22=0.9886188373396114);">
        <div style="margin-top:10px; margin-left:10px; border:1px solid darkblue;">
            I do not rotate in IE 8.
        </div>
    </div>
</body>
</html>

Конечно, если вам нужен абсолютный элемент дочернего элемента по определенной причине, вам может не повезти (возможно, вы сможете достичь чего-то с помощью float, но это будет зависеть именно от того, что вам нужно).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...