在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事件問題？

回答

相關問題