IE10上使用CSS3透视变换的工件

Question

使用CSS转换属性更改3D视角时，我在Internet Explorer 10上遇到问题。

随机工件出现在元素中包含的一些元素的边缘，并应用了透视。

我创造了一个简单的小提示来证明这个问题： http://jsfiddle.net/b9ztC/

要重现，只需打开小提琴并尝试选择，单击或播放文本，这会导致以下工件在段落元素周围出现/消失：

在更复杂的场景中出现更多的线条和工件，原因似乎是css的以下行：

transform: perspective(800px);

解决问题的唯一方法似乎是：

• 不要将视角应用于元素
• 将转换视角设置为0px
• 使用perspective: 800px，而不是transform: perspective(800px)

最后一个似乎是一个简单的解决方案，但它在某些情况下效果不佳，例如下面的3D翻转卡演示（使用IE10在卡片背面有相同的工件问题）效果不佳将rotation属性与旋转变换分开应用时：http://www.cssplay.co.uk/menu/css3-3d-card.html

有没有人遇到过这个问题？有什么办法可以防止这种情况发生吗？

我也想知道这是否发生在每台机器上，或者它可能是与硬件相关的问题。

Answer 1

我看到的问题大致相同，但只是在div的左侧，它会根据变换而变化。它似乎是在线边缘渗透的背景。

我在使用IE 10.0.9200.16686（KB2870699）的Windows 7 x64上使用Radeon HD 4670（Catalyst 13.1）。

到目前为止，我发现的唯一实用的解决方法是在内部元素上应用填充，即在p而不是div上。但是，我不确定填充是否实际上是触发器，因此这可能不适用于其他情况。