Internet Explorerのバージョン6と7の後のセレクタ：

Question

this blog に記載されているウィザードのniceスタイルを使用していますが、残念ながらIEでうまく動作しません。ブログ：

after：/ before/nth-childをサポートしていないブラウザの場合、コードは機能しません。

IEブラウザでうまく動作するようにこの問題を解決する方法はありますか。

FYI、CSSは次のとおりです。

#wizHeader li .prevStep 
{ 
    background-color: #669966; 
} 
#wizHeader li .prevStep:after 
{ 
    border-left-color:#669966 !important; 
} 
#wizHeader li .currentStep 
{ 
    background-color: #C36615; 
} 
#wizHeader li .currentStep:after 
{ 
    border-left-color: #C36615 !important; 
} 
#wizHeader li .nextStep 
{ 
    background-color:#C2C2C2; 
} 
#wizHeader li .nextStep:after 
{ 
    border-left-color:#C2C2C2 !important; 
} 
#wizHeader 
{ 
    list-style: none; 
    overflow: hidden; 
    font: 18px Helvetica, Arial, Sans-Serif; 
    margin: 0px; 
    padding: 0px; 
} 
#wizHeader li 
{ 
    float: left; 
} 
#wizHeader li a 
{ 
    color: white; 
    text-decoration: none; 
    padding: 10px 0 10px 55px; 
    background: brown; /* fallback color */ 
    background: hsla(34,85%,35%,1); 
    position: relative; 
    display: block; 
    float: left; 
} 
#wizHeader li a:after 
{ 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ 
    border-bottom: 50px solid transparent; 
    border-left: 30px solid hsla(34,85%,35%,1); 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
    left: 100%; 
    z-index: 2; 
} 
#wizHeader li a:before 
{ 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 30px solid white; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
    margin-left: 1px; 
    left: 100%; 
    z-index: 1; 
} 
#wizHeader li:first-child a 
{ 
    padding-left: 10px; 
} 
#wizHeader li:last-child 
{ 
    padding-right: 50px; 
} 
#wizHeader li a:hover 
{ 
    background: #FE9400; 
} 
#wizHeader li a:hover:after 
{ 
    border-left-color: #FE9400 !important; 
} 
.content 
{ 
    height:150px; 
    padding-top:75px; 
    text-align:center; 
    background-color:#F9F9F9; 
    font-size:48px; 
} 

Answer 1

前とCSSの要素の後にはアップIE8で動作しなければなりません。

IE7の場合、擬似要素サポートの前に&の後に追加するにはIE7.jsハックを使用してください。

次のようなファイルを含めるには条件文を使用することをお勧めします。

<!--[if IE 7]> 
    insert script here 
<![endif]--> 

IE6の場合、個人的には気にならず、正常に機能が低下しません。

もう1つのオプションはto use ie-css3.jsです。