IE에서 회전 된 div에 스타일 및 js 이벤트 문제가 있습니까?

div를 회전 시켰습니다. Chrome에서는 & Firefox에서 정상적으로 작동하고 올바르게 작동합니다. 그러나 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>

로 전환 것입니다 그리고 당신은 그러나이 자바 스크립트를 필요

$(document).ready(function() { 
    $("#myExpanderContainer").click(function() { 
alert("Clicked"); 
     }); 
    });

으로 스크립트와 CSS

#myExpanderContainer 
{ 
    width: ...px; //~12px depends on browser settings, a value which could be inherited 
    height: ...px; //depends on length of link, 
    cursor: pointer; 
}

에 추가 할 수 있습니다 길이가 다른 텍스트의 치수를 설정하거나, 링크가 변경되거나 정적 인 경우 치수가 적절할 수 있습니다. 이것은 아마도 가장 우아한 해결책은 아니지만 작동 할 것입니다.

출처

2012-06-07 01:12:21 Posicoln

IE에서 회전 된 div에 스타일 및 js 이벤트 문제가 있습니까?

답변

관련 문제