在 IE8 中使用伪 :before 和 :after 元素对面包屑导航进行 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);
        }
    },