CSS 容器边缘的三角形 ie8

Question

我有一个 table，我制作了一个 class，它在 header 单元格的底部边缘放置了一个三角形。看这里

它在除 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

CSS 容器边缘的三角形 ie8

CSS triangle on edge of container ie8

html

css

sass

internet-explorer-8