Question

我已经旋转了一个div，看起来很好并且在Chrome＆amp; Firefox浏览器。然而在IE（v9.0.8112.16421）中，风格与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＆amp; 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>

Answer 1

一种解决方案可能是将旋转的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来设置不同长度文本的尺寸，如果链接正在改变，或者它们是静态的，那就没问题了。这可能不是最优雅的解决方案，但它可以工作

IE中旋转div的样式和js事件问题？

1 个答案: