在 IE9 和 IE10 中，旋转容器不会像预期的那样剪裁其旋转的嵌套元素答案

【问题标题】：In IE9 and IE10 rotated container doesn't clip its rotated nested elements as it is supposed to在 IE9 和 IE10 中，旋转容器不会像预期的那样剪裁其旋转的嵌套元素
【发布时间】：2013-09-28 19:49:00
【问题描述】：

这是一个例子：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 中看到指针，这是错误的。

我应该怎么做才能让事情变得正确？

【问题讨论】：

标签： css rotation internet-explorer-9 internet-explorer-10

【解决方案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 是不太支持的剪辑 html 的绝佳替代品带 svg。

更复杂的例子：http://jsfiddle.net/aFEZ8/5/ Chrome 中的脆边（版本 29，Win 7）......哦，好吧。其他现代浏览器（至少是桌面浏览器，包括“最后一个”适用于 Windows 的 Safari）没有这个问题。

【讨论】：