html - 使用 border-radius 进行翻译时随机显示 IE10 接缝

Question

我正在为 IE10 中的渲染错误寻求一些建议。我创建了一个 animated-flip，它适用于我关心的所有浏览器。在测试中，我发现无缘无故地显示了随机的类似边框的线条。据我所知，它们不是实际的边框、轮廓或阴影。似乎子元素(例如示例中的 anchor )没有正确呈现。

我知道类似的效果会发生在 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;
}