转换父项时边框上不需要的轮廓

Question

我在某些内容上使用边框。但是，我发现一个不需要的 1px 轮廓与转换父级时在边框周围添加的background颜色相同（至少使用 scale 和 rotate）。这也发生在孩子的伪元素上

.container { 
    transform:rotate(-45deg); 
}
.child {
    border:3px solid white; background:green;
}

jsFiddle 合作

我已经在最新的Chrome和IE上进行了测试，问题出在两者上

如何在不使用box-shadow或删除转换的情况下摆脱此大纲？

Answer 1

添加一个翻译Z（1px）

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:rotate(-45deg); 
}

（不太确定为什么这有效...

小提琴

似乎IE需要更多的修复...

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:perspective(999px) translateZ(1px) rotate(-45deg); 
}

小提琴2

Answer 2

不是一个很好的修复，但添加backface-visibility: hidden;来确定元素在背对屏幕时是否应该可见，通常在您"翻转"和元素时使用，似乎可以修复它，至少在 Chrome 中是这样。不过，我还没有可能在IE中进行测试。

我

尝试它的原因是因为这个"黑客"解决了我以前遇到的简单问题。但我不太确定它为什么有效...

js小提琴

Answer 3

在 chrome 中，您应该能够使用-webkit-backface-visibility: hidden;来解决此问题。我不太确定IE，我现在没有什么可以测试的。

http://jsfiddle.net/ayFbD/4/