Question

我一直在努力创建一个跨浏览器兼容的痕迹导航，该导航适用于＆gt; = IE8以及所有较新的浏览器。

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

（以上链接在IE8中不起作用，但您可以在此处查看最终结果：http://codepen.io/anon/full/jlbck）

我不知道我能尝试让这个工作。问题似乎是绝对定位的li：在元素之前没有出现在li之上。 css对我来说似乎很好 - 特别是因为它适用于所有较新的浏览器 - 但有没有人知道IE浏览器可以解决这个问题？

修改（抱歉，认为只需在演示中提供代码即可）

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与伪元素挣扎的一般问题有关（：之前，之后）。我用字体图标体验过这个。我发现这个帖子很有帮助：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);
        }
    },

IE8中痕迹导航的CSS样式使用伪：before和：after元素

1 个答案: