我正在尝试使用专有的MS过滤器DXImageTransform.Microsoft.Matrix旋转IE8中的可单击元素。我已经正确计算了矩阵，并且可见地旋转了元素，但是响应点击的区域似乎保持了与旋转之前相同的形状和位置。
显示此问题的示例代码：
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本身。
最佳答案
我试图更改您的标记，以这种方式将文本包装在额外的<span>元素中
<div class="rotated">
<span>Element which is longer than it is wide...</span>
</div>
然后我相应地更改了样式（请注意，我也更改了
height: auto，因为某些字母被剪切了）.rotated {
border: 1px red solid;
height: auto; /* required for IE7 to perform rotation */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0, M12=-1, M21=1, M22=0, sizingMethod='auto expand');
}
span { display: block; }
和javascript，因此click事件附加在
spanjQuery(function($) {
$('.rotated span').click(function() {
alert('You clicked within the original boundary');
});
});
在IE8中，您也可以单击未被字符覆盖的底部区域。
参见前叉：http://jsfiddle.net/wdbK8/
关于javascript - 旋转IE8 +中的可点击元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8876322/