html - -webkit-transform 并忽略 z-index

Question

在 safari 5.1.7 for windows 上，一些旋转的元素会穿过其他元素:

在其他浏览器 Firefox、Chrome、IE 上我得到:

有没有办法避免 safari 上的“剪切”问题？

显示问题的 jsfiddle here .

CSS:

.myFlip {
    width: 310px;
    margin: 20px auto;
    -moz-perspective: 780px;
    -webkit-perspective: 780px;
    perspective: 780px;
}
.myFlip li {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: -70px;
}
.test1 {
    background-color:green;
    z-index: 30;
    -moz-transform: rotateY(0deg) scale(1.2);
    -webkit-transform: rotateY(0deg) scale(1.2);
    transform: rotateY(0deg) scale(1.2);
}
.test2 {
    background-color:black;
    z-index: 10;
    -moz-transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    transform: rotateY(45deg);
}

html:

<ul class="myFlip">
    <li class="test1"></li>
    <li class="test2"></li>
</ul>

Answer 1

在大多数情况下，z-index 不适用于没有“position”属性的元素。 Try this

例如:

position:relative;
z-index: 10;

我没有 Safari 浏览器来测试它。