Question

我正在为IE10中的渲染错误寻找一些建议。我创建了一个动画翻转，它适用于我关心的所有浏览器。在测试过程中，我发现随机边框线条无缘无故地显示出来。它们不是我能说的实际边界，轮廓和阴影。似乎子元素（例如示例中的锚点）根本无法正确呈现。

我知道在mobile-safari上可能会发生类似的效果，人们会使用margin-whatever: -1，但这似乎没有效果。

我将示例缩减到了重现错误所需的最低限度。似乎如果我删除这些样式中的任何一种，问题就会消失。

perspective: 2000px;              // Remove and the animation looks awful
border-radius: 6px;               // Remove and the modal will look different then all others
-ms-transform: rotateY(0); 
transition: all 0.4s ease-in-out;

DEMO

Answer 1

我的例子可以帮到你

body {
  background: #555;  
}
.pt, .front {
  width: 100px;
}
.pt {
  margin: 0 auto;

}
.front {
  position: absolute;
  background: #FFF;
  padding: 20px;
  transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  transform-origin: 0% 0%;
  perspective: 200;
  perspective-origin: 50% 50%;
  -webkit-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  -webkit-transform-origin: 0% 0%;
  -webkit-perspective: 200;
  -webkit-perspective-origin: 50% 50%;
  -moz-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  -moz-transform-origin: 0% 0%;
  -moz-perspective: 200;
  -moz-perspective-origin: 50% 50%;
  -o-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  -o-transform-origin: 0% 0%;
  -o-perspective: 200;
  -o-perspective-origin: 50% 50%;
  -ms-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
  -ms-transform-origin: 0% 0%;
  -ms-perspective: 200;
  -ms-perspective-origin: 50% 50%;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
}

使用border-radius进行平移时，会显示随机IE10接缝

1 个答案: