使用伪 :before and :after elements 的 IE8 中面包屑导航的 CSS 样式

Question

我已经尝试了很长时间来创建一个跨浏览器兼容的面包屑导航，它可以在 >= IE8 以及所有更新的浏览器中工作。

这是我最接近的:http://codepen.io/anon/pen/jlbck

(以上链接在 IE8 下无效，但你可以在这里看到最终结果:http://codepen.io/anon/full/jlbck)

我不知道该怎么做才能让它发挥作用。问题似乎是绝对定位的 li:before 元素没有出现在 li 之上。 css 对我来说似乎很好 - 特别是因为它适用于所有较新的浏览器 - 但是有人知道可以为 IE8 修复此问题的 IE hack 吗？

编辑(不好意思，以为只是在演示中提供代码就足够了)

HTML:

<ul class="progress">
  <li class="first">One</li>
  <li class="current">Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>

CSS:

.progress {
    list-style: none;
    padding: 0;
    height: 24px;
    overflow: hidden;
}
.progress li {
    display: inline-block;
    width: 100px;
    text-align: center;
    padding: 4px 10px 2px 15px;
    margin: 0 1px 0 0;
    height: 20px;
    position: relative;
    background-color: #E4E4E4;
    font-size: 13px;
}
.progress li:after {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 10px solid #E4E4E4;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 100%;
    z-index: 3;
}
.progress li:before {
    content:" ";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    margin-left: 3px;
    left: 100%;
    z-index: 2;
}
.progress li.first {
    padding-left: 10px;
}
.progress li.current {
    background-color: #029E4A;
    color: #fff;
    font-weight: bold;
}
.progress li.current:after {
    border-left: 10px solid #029E4A;
}
.progress li.last:before, .progress li.last:after {
    display: none;
}

Answer 1

这可能与 IE8 与伪元素 (:before, :after) 斗争的一般问题有关。我用字体图标经历过这个。我发现这个线程很有帮助:IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh

这是我实现的解决方案(使用 YUI):

    _redrawIcons: function (node) {
        var style;
        if (Y.UA.ie === 8) {
            style = document.createElement('style');
            style.type = 'text/css';
            style.styleSheet.cssText = ':before,:after{content:none !important;}';
            node.appendChild(style);
            setTimeout(function () {
                node.removeChild(style);
            }, 0);
        }
    },