gpt4 book ai didi

javascript - 在 IE8+ 中旋转可点击元素

转载 作者:太空宇宙 更新时间:2023-11-03 19:09:26 24 4
gpt4 key购买 nike

我正在尝试使用专有的 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,所以点击事件附加在 span

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

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

查看 fork :http://jsfiddle.net/wdbK8/

关于javascript - 在 IE8+ 中旋转可点击元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8876322/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com