IE8中负z-index的问题

Question

我使用两个伪元素在div上创建横幅效果，如下所示：

div { position: relative; width: 200px; background-color: #999; }
div:before, div:after { content: ""; width: 10px; height: 0; display: block; position: absolute; z-index: -1; top: 10px; border-top: 10px solid #666; border-bottom: 10px solid #666; }
div:before { right: -20px; border-right: 10px solid transparent; border-left: 10px solid #333; }
div:after { left: -20px; border-left: 10px solid transparent; border-right: 10px solid #333; }

它适用于FF，Chrome，Safari和IE9，但IE8没有运气。 z-index为-1的两个元素显示在父元素之上。有没有办法让这个工作？

Answer 1

您应该尝试将z-index设置为div。