css - IE9 および IE10 では、回転されたコンテナーは、回転されたネストされた要素をクリップしません。

Question

例を次に示します: http://jsfiddle.net/aFEZ8/3/

HTML

<span id="square"></span>
<div id="wrap">
    <div></div>
</div>

CSS

#wrap{
position:absolute;
left:100px;
top:100px;
border:solid 1px #000;
width:100px;
height:100px;
-webkit-transform:rotate(33deg);
overflow:hidden;
transform:rotate(33deg);
}
#wrap div{
-webkit-transform:rotate(-33deg);
-webkit-transform-origin:0 0;
transform:rotate(-33deg);
transform-origin:0 0;
height:100%;
width:200%;
border:solid 1px #f00;
cursor:pointer;
position:absolute;
}
#square{
position:absolute;
left:200px;
top:100px;
width:4px;
height:4px;
background:#aaa;
}

グレーの四角にカーソルを合わせようとすると、IE 9 および 10 ではポインターが表示されますが、これは正しくありません。

物事を正しくするために何をすべきですか？

Answer 1

何時間もの欲求不満の後、私は解決策を見つけました:あなたは回転されていない余分なラッパーを追加するだけです-それはその内部要素を正しくクリップします: http://jsfiddle.net/aFEZ8/4/

If someone thinks it's a good idea to add code here, please feel free to do it.
I think it's superfluous in this case.

複数のネストされた回転コンテナーとマージンと角度の計算に費やされた労力により、任意の html のポリゴン クリップを作成することが可能になり、カーソル ホバリングが正しく機能します。この IMO は、あまりサポートされていない svg を使用したクリッピング html の優れた代替手段です。

より複雑な例: http://jsfiddle.net/aFEZ8/5/ Chrome (ver. 29、Win 7) のクリスピー エッジ...ああ、まあ。他の最新のブラウザー (Windows 用の「最後の」Safari を含む、少なくともデスクトップ) には、この問題はありません。