在IE8 +中旋转可点击元素 [英] Rotating clickable elements in IE8+
问题描述
我试图使用专有的MS过滤器 DXImageTransform.Microsoft.Matrix 旋转IE8中的可点击元素。我已经正确计算了矩阵，并且元素被可视地旋转，但是响应点击的区域似乎保持与旋转之前相同的形状和位置。
显示此问题的示例代码：
HTML内容：
< html>
< head>
< link rel =stylesheethref =test.css/>
< script src =jquery.js>< / script>
< script src =test.js>< / script>
< / head>
< body>
< div class =rotated>
比它更长的元素... ...
< / div>
< / body>
< / html>
CSS的内容：
.rotated {
height：15px; / * IE7执行旋转所需的* /
filter：progid：DXImageTransform.Microsoft.Matrix（M11 = 0，M12 = -1，M21 = 1，M22 = 0，sizingMethod ='auto expand'）;
}
JS的内容：
jQuery（function（$）{
$（'rotate'）。click（function（）{
alert '）;
}）;
}）;
点击文本的左上角将显示警报，低于指定的高度将不会注册。注意，这在IE7中不执行相同;
我也尝试过使用 progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）; $ c>代替矩阵过滤器，但是这有相同的结果。
过去有人处理这个问题，或者有任何信息在这种情况下有帮助？
编辑：我已经在jsFiddle上复制了这个：
http://jsfiddle.net/e46jD/
编辑：结果我已经烧毁依靠IE9提供准确的仿真IE8。在IE8的实际安装中测试代码工作正常。所以，现在唯一的问题是与IE9本身。
解决方案这解决了我的问题在所有浏览器。我的文本被旋转后，剪裁，位置，顶部和padding属性帮助我。宽度为100％很重要。过滤器和ms变换是IE的
#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）;
}
I am attempting to rotate clickable elements in IE8 using the proprietary MS filter DXImageTransform.Microsoft.Matrix. I've calculated the matrix correctly and the element is visibly rotated, however the area that responds to the click appears to maintain the same shape and position as before the rotation.
Example code which displays this problem:
Content of 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>
Content of 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');
}
Content of JS:
jQuery(function($) {
$('.rotated').click(function() {
alert('You clicked within the original boundary');
});
});
Clicking on the top left corner of the text will show the alert, however, anywhere on the visible text lower than the specified height will not register. Note that this does not perform the same in IE7; the clickable area is also rotated.
I have also tried using progid:DXImageTransform.Microsoft.BasicImage(rotation=3); in place of the matrix filter, however this has the same results.
Has anyone had to deal with this in the past, or have any information which would be helpful in this case?
EDIT: I've replicated this on jsFiddle:
http://jsfiddle.net/e46jD/
EDIT: Turns out I've been burnt for relying on IE9 to provide accurate emulation of IE8. Testing the code in an actual installation of IE8 works fine. So, now the only problem is with IE9 itself.
解决方案 this solved my problem across all browsers. My text was getting clipped after rotation, the position, top and padding properties helped me out. width of 100% is important. filter and ms transform is imp for IE
#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 +中旋转可点击元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
