Question

我正在尝试使用专有的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本身。

Answer 1

我试图改变你的标记，用这种方式将你的文本包装在一个额外的<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，因此点击事件附加在span

上

jQuery(function($) { 
    $('.rotated span').click(function() { 
        alert('You clicked within the original boundary'); 
    }); 
});

在IE8中，您也可以单击字符未覆盖的底部区域。

见叉子：http://jsfiddle.net/wdbK8/

Answer 2

通过浏览器支持拆分CSS规则，并使用条件注释来处理IE，我在所有目标浏览器中取得了有效的效果。

大的showstopper是IE9会因DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, sizingMethod='auto expand')而明显旋转元素，但不会旋转可交互的边界框。我自从发布这个问题以来IE9已经减少了对过滤器的支持，所以我已经设置好了，因此对于IE7 / 8它使用过滤器，对于IE9，它使用-ms-transform。

不太优雅，但现在可行。

Answer 3

这解决了我在所有浏览器中遇到的问题。我的文字在旋转后被修剪，位置，顶部和填充属性帮助了我。宽度100％很重要。对于IE

，过滤器和ms变换是imp

#rotationCSS    { 
    width:100%;
    font-size:1.3em;
    font-weight:bold;
    float:right;  
    -webkit-transform: rotate(90deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(90deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(90deg)!important;  /* IE 9 */
    -o-transform: rotate(90deg);  /* Opera 10.50-12.00 */
    transform: rotate(90deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
    position: absolute;
    top: 20px;
    padding: 35px 20px 0px 10px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

在IE8 +中旋转可点击元素

3 个答案: