旋转元素的 IE8 悬停/渲染错误答案

【问题标题】：IE8 hover / rendering bug for rotated elements旋转元素的 IE8 悬停/渲染错误
【发布时间】：2013-03-20 09:08:13
【问题描述】：

我正在使用 jQuery 插件来生成带有旋转文本标签的水平手风琴。它叫做easyAccordion，演示页面在这里：

我的问题，即使在他们的演示页面上也很明显，IE8 似乎将旋转元素（插件使用 CSS Microsoft 旋转过滤器）视为可悬停/可点击区域未旋转。这意味着只有按钮的顶部是可点击的，达到元素宽度的大小。奇怪的是，这在 IE7 中可以正常工作，但在 IE8 中却不行。

是否有某种方法（CSS 或其他）可以解决此问题并允许整个元素可点击？

【问题讨论】：

这个问题stackoverflow.com/questions/8876322/… 似乎表明该错误在 IE8 中不存在（我在 IE9 中使用 IE8 文档模式）。如果有人能够使用上面的链接确认这一点，将不胜感激。
我在 IE8 中看不到任何可疑之处。它就像在 chrome 中一样工作。
screenshot
对我来说，即使在 ie10 中也无法正确显示。 :O

【解决方案1】：

使用 CSS 过滤器旋转实际上只转换 DOM 节点的绘制结果，而不是实际节点本身。这意味着与 DOM 节点的任何交互都不会覆盖与您在屏幕上看到的相同的坐标。

我曾经创建了一个 45 度角的可变长度导航栏，但需要使用实际文本而不是图像。对于 IE，我最终在将鼠标事件委托回原始节点的整个事物上分层了一个透明图像映射。

【讨论】：