1

我旋转了一个 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>
4

1 回答 1

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 为不同长度的文本设置尺寸，如果链接正在更改，或者如果它们是静态的，那就没问题了。这可能不是最优雅的解决方案，但它会起作用

于 2012-06-07T01:12:21.120 回答