jquery - 在 IE9 中重复添加样式时，Div 偶尔会丢失其变换状态

Question

我在这里建立了一个带有视差效果的色带盒:http://method.ac .

如果您查看 IE9 中订阅框的 Angular ，您会发现它们的行为与预期不同，它们正在从镜像状态(通过 ms-transform: scale(-1, 1) 跳转到正常状态) , 但只有一些时候。它在 Opera、Firefox、Safari 和 Chrome 中运行良好。

我正在使用 jquery 更改滚动条的高度。

背景是一个svg。我不能使用四个不同的图像，因为 webkit 有一个错误，如果 viewBox 设置为 0 0 1 1 并且黑色三 Angular 形位于左上角(见图)，它不会呈现 svg。

非常感谢任何帮助。

Answer 1

因为这个错误似乎与 svg 有关，也许你应该用不同的方法来制作这些 Angular 。我建议边界艺术。 CSS 类似于:

.corner {
    width: 0px;
    height: 0px;
    position: absolute;
    z-index: 1;
    border: 10px solid #1f1f1e;
    border-top-width: 3px; /* reset to half your height by your javascript */
    border-bottom-width: 3px; /* reset to half your height by your javascript */
}

.left.corner {
    left: -10px;
    border-right-color: #cbc7bb;
}

.bottom.corner {
    bottom: -6px; /* reset to full height by your javascript on the element */
    border-top-color: #cbc7bb; 
}

.top.corner {
    top: -6px; /* reset to full height by your javascript on the element */
    border-bottom-color: #cbc7bb; 
}

.right.corner {
    right: -10px;
    border-left-color: #cbc7bb;
}

我相信这应该有助于让所有内容都跨浏览器，包括您的 IE9 问题。