私は長い間、すべての新しいブラウザーと同様に IE8 以上で動作するクロスブラウザー互換のブレッドクラム ナビゲーションを作成しようと試みてきました。
ここに私が来た最も近いものがあります: 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;
}