容器边缘的CSS三角形ie8

Question

我有一个表，我创建了一个类，在标题单元格的底部边缘放置一个三角形。见这里

除了ie8之外，它在所有方面都很完美。通过在线阅读，我发现ie8支持这些三角形，但是当我尝试将它放在单元格之外时它会消失。

有人知道为什么会发生这种情况以及如何解决这个问题吗？

SASS：

.rds-promo-header{
    color: #e3c02f !important;
    position:relative;
    &:before{
        content:" ";
        width: 0; 
        height: 0; 
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;       
        border-top: 10px solid pink;
        position: absolute;
        bottom: -10px;
        left: 47%;
    }
}

.ie8 .rds-promo-header:before{

}

在ie8上看起来像这样：

Answer 1

它是z-index。

.rds-promo-header {
    width 100%;
    height: 20px;
    background-color: navy;
    color: #e3c02f !important;
    position:relative;
    z-index: 0;

    & + & {
        background-color: gray;
    }
}

.arrow {
    z-index: 9999;
    &:before {
        content:" ";
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid navy;
        position: absolute;
        bottom: -10px;
        left: 47%;
    }

    & + &:before {
        border-top: 10px solid gray;
    }
}

JSFiddle

Image via BrowserStack Win7 IE8