我一直在尝试创建一个跨浏览器兼容的面包屑导航,该导航适用于 >= 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;
}