我旋转了一个 div，它在 Chrome 和 Firefox 中看起来不错并且功能正常。但是在IE(v9.0.8112.16421)中，style & click事件似乎只应用于div旋转前与div位置相交的区域。
请注意，在我的示例代码中，当您将鼠标悬停在上方时，光标仅显示在 div 的顶部附近。另请注意，当您单击 div 底部时没有任何反应，但当您单击顶部附近时会触发该事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style>
#myExpander
{
position:absolute;
padding: 5px;
top: 100px;
cursor: pointer;
border: 1px solid black;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#myExpander").click(function () {
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="myExpander">
click me
</div>
</body>
</html>
任何人都可以阐明我所缺少的东西吗？
编辑(解决方案):这是根据 Posicoln answer 的最终解决方案以下。请注意 -X-transform-origin 样式已更改，因为此解决方案在 Chrome 和 FF 中显示不同。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style>
#myExpanderOuter
{
position:absolute;
padding: 5px;
top: 100px;
height: 80px;
width: 31px;
margin: 0 0 0 0;
padding: 0 0 0 0;
cursor: pointer;
border: 1px solid black;
}
#myExpanderInner
{
height: 30px;
width: 79px;
text-align: center;
}
.rotated270degrees
{
-webkit-transform-origin: 40 40;
-moz-transform-origin: 40 40;
-ms-transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#myExpanderOuter").click(function () {
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="myExpanderOuter">
<div id="myExpanderInner" class="rotated270degrees">
Click me
</div>
</div>
</body>
</html>
最佳答案
一种解决方案是将旋转后的 div 放入具有旋转尺寸的普通 div 中并旋转它。 所以
<div id="myExpander">
click me
</div>
会转向
<div id="myExpanderContainer">
<div id="myExpander">
click me
</div>
</div>
你可以添加到你的 CSS 中
#myExpanderContainer
{
width: ...px; //~12px depends on browser settings, a value which could be inherited
height: ...px; //depends on length of link,
cursor: pointer;
}
用你的脚本作为
$(document).ready(function () {
$("#myExpanderContainer").click(function () {
alert("Clicked");
});
});
然而，这需要 javascript 来为不同长度的文本设置尺寸，如果链接在变化，或者如果它们是静态的，那就没问题了。 这可能不是最优雅的解决方案，但它会起作用
关于html - IE 中旋转 div 的样式和 js 事件问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10920663/