0

私は長い間、すべての新しいブラウザーと同様に 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;
}
4

1 に答える 1

0

これは、疑似要素 (:before、:after) を扱う IE8 の一般的な問題に関連している可能性があります。私はこれをフォントアイコンで経験しました。このスレッドが役に立ちました: IE8 CSS @font-face fonts only working for :before content on over and once 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-22T14:05:45.307 に答える