Я пытаюсь вращать интерактивные элементы в IE8, используя собственный фильтр MS DXImageTransform.Microsoft.Matrix.Я правильно рассчитал матрицу, и элемент заметно поворачивается, однако область, реагирующая на щелчок, кажется, сохраняет ту же форму и положение, что и до вращения.
Пример кода, который отображает эту проблему:
Содержимое HTML:
<html>
<head>
<link rel="stylesheet" href="test.css"/>
<script src="jquery.js"></script>
<script src="test.js"></script>
</head>
<body>
<div class="rotated">
Element which is longer than it is wide...
</div>
</body>
</html>
Содержимое CSS:
.rotated {
height: 15px; /* required for IE7 to perform rotation */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, sizingMethod='auto expand');
}
Содержимое JS:
jQuery(function($) {
$('.rotated').click(function() {
alert('You clicked within the original boundary');
});
});
Нажатие в верхнем левом углутекст покажет предупреждение, однако нигде на видимом тексте ниже указанной высоты не будет регистрироваться.Обратите внимание, что это не выполняет то же самое в IE7;интерактивная область также поворачивается.
Я также пытался использовать progid:DXImageTransform.Microsoft.BasicImage(rotation=3); вместо матричного фильтра, однако это дает те же результаты.
Кто-нибудь сталкивался с этим впрошлое или у вас есть какая-либо информация, которая будет полезна в этом случае?
РЕДАКТИРОВАТЬ: Я повторил это на jsFiddle: http://jsfiddle.net/e46jD/
РЕДАКТИРОВАТЬ: Оказывается, я сгорел за то, что полагался на IE9 для обеспечения точной эмуляции IE8.Тестирование кода в реальной установке IE8 работает нормально.Итак, теперь единственная проблема с самим IE9.