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

我已经旋转了一个div，这看起来很好，并在Chrome浏览器中正常运行。但是，在IE（v9.0.8112.16421）中，&单击事件样式似乎只适用于div旋转前与div位置相交的区域。在IE中旋转div的样式和js事件问题？

请注意，在我的示例代码中，鼠标悬停时，光标仅显示在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最终的解决方案。请注意，由于此解决方案在Chrome & FF中显示有所不同，因此-X-transform-origin样式已更改。

<!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>

来源

2012-06-06 John MacIntyre

一种解决方案可能是将旋转后的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-07 01:12:21 Posicoln

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

回答

相关问题