Вращающиеся интерактивные элементы в IE8 +
Я пытаюсь вращать интерактивные элементы в IE8, используя собственный фильтр MSDXImageTransform.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.