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

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

Вот код:

<!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, которые были повернуты с помощью MS dximagetransform.matrix, не наследуют преобразование в IE 8.

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

РЕДАКТИРОВАТЬ: добавлен открывающий HTML-тег. Проблема все еще существует.

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


css css-position matrix transform internet-explorer-8
person davydka    schedule 16.06.2010    source источник
comment
Нет необходимости открывать тег html?   -  person Babiker    schedule 16.06.2010

Ответы (2)


arrow_upward
2
arrow_downward

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

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

Поворот в IE8 с использованием поля вместо позиции
(источник: boogdesign.com)

<!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>

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

person robertc    schedule 16.06.2010
comment
Привет, RobertC, если бы это было правдой, почему я вижу частичную реализацию? Вы пробовали ваше предложение? Когда я пробую это, проблема все еще остается. На самом деле, это кажется еще хуже, так как теперь он вращается вне оси. tinypic.com/r/2dhis95/6 - person davydka; 17.06.2010
comment
Извините, я неправильно понял вашу проблему. - person robertc; 18.06.2010
comment
Отредактировано: на этот раз я попытался ответить на вопрос, который вы действительно задали. - person robertc; 18.06.2010
comment
Привет RobertC, Спасибо за ваши ответы. Именно к такому эффекту я и стремлюсь. Поплавки - интересная идея. Принудительный «Режим совместимости» также решает проблему. Это можно сделать, поместив в заголовок следующий метатег. ‹meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 › Итак, реальный вопрос, который меня интересует: следует ли считать этот другой/новый рендеринг в IE8 более правильным или его следует считать ошибкой? - person davydka; 19.06.2010
comment
Я думаю, что предпочитаю иметь способ «отключить» фильтры для дочерних элементов и по-прежнему иметь возможность позиционировать относительно содержащего блока, но я не уверен, совместим ли он с тем, как CSS-преобразования работают в других браузерах. - person robertc; 19.06.2010
comment
Да, во введении к спецификации: любое значение преобразования, отличное от «none», приводит к созданию как контекста стека, так и содержащего блока. Объект действует как содержащий блок для потомков с фиксированным положением. Я думаю, что то, что делает IE6/7, является «более правильным» в том смысле, что они более точно соответствуют стандарту для преобразований, но, конечно, когда вы используете проприетарные расширения браузера, «более правильное» на самом деле не применяется. - person robertc; 19.06.2010

arrow_upward
21
arrow_downward

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

person anwerso    schedule 07.06.2011
comment
Я потерял 2 недели, создавая это решение. Я так счастлив, IE выглядит как корзина с пасхальными яйцами или даже подземелье, полное ловушек.. ›:-[] - person Epsiloncool; 25.04.2012
comment
Идеальное решение! ...жаль, что результат похож на рвоту. знак равно - person issa marie tseng; 25.05.2012