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

我已经旋转了一个div，它看起来不错，在Chrome和Firefox中功能正常。但是，在IE（v9.0.8112.16421）中，样式和单击事件似乎仅应用于与旋转前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答案的最终解决方案。请注意，-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为不同长度的文本设置尺寸，如果链接正在更改，或者它们是静态的，那就没问题了。这可能不是最优雅的解决方案，但它会起作用

相关内容

最新更新

热门标签：