使用伪在IE8中的面包屑导航的CSS样式：之前和：之后元素

我一直在尝试很长时间来创建一个跨浏览器兼容的breadcrumb导航工作在> = IE8以及所有较新的浏览器。使用伪在IE8中的面包屑导航的CSS样式：之前和：之后元素

这里是我来最接近：http://codepen.io/anon/pen/jlbck

（以上链接无法在IE8中工作，但你可以在这里看到最终结果：http://codepen.io/anon/full/jlbck）

我不知道我可以试着让这个工作。问题似乎是绝对定位的li：before元素没有出现在li上面。 CSS对我来说似乎很好 - 特别是它适用于所有新的浏览器 - 但是有谁知道可以修复IE8的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; 
}

来源

2013-07-22 RobMasters

请包括相关的代码* *在这里你的问题，以及在一个演示。 –

您是否找到解决问题的方法？如果是，请与社区分享！ – AymKdn

我现在真的不记得了，但我不认为我做过。这个问题不再与我有关，所以我会投票决定关闭它。 – RobMasters

这可能是相关的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); 
     } 
    },

来源

2013-07-22 14:05:45 JacobMcLock

对不起，如果这是疯狂的基地。因为它需要IE8，所以我无法重新创建你的场景。 – JacobMcLock

我刚看过这个，但找不到与我的特定问题相关的任何内容。不管怎么说，还是要谢谢你。 – RobMasters

使用伪在IE8中的面包屑导航的CSS样式：之前和：之后元素

回答

相关问题