私のウェブサイトのデザインでは、:before
および:after
疑似要素。これらは、Google chromeおよびFirefoxで正常に動作しています。ただし、Internet Explorerで問題が発生しています。
私が使用しているコードは
#nav ul li.active:after {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
content: "";
border-top: 13px solid rgba(2,155,223,0.9);
position: absolute;
bottom: -13px;
width: 0px;
margin-left: -20px;
}
そしてアウトプットは
1.グーグルクロームで
2. Internet Explorer 11の場合
IEこのCSSを防止していますか?in :: beforeのすべてのスタイルがIE11で取り消し線として表示されているためです。
IE11を含むすべてのブラウザーでドロップ矢印を揃えるために、CSSを少し変更する必要があります。こちらのCSSをご利用ください。
#nav li{
display: inline-block;
position: relative; /*Added Line*/
}
#nav ul li.active:after {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
content: "";
border-top: 13px solid rgba(2,155,223,0.9);
position: absolute;
bottom: -10px; /*change from -13 to 10px*/
width: 0px;
/*margin-left: -20px;*/ /*REmoved Line*/
left: 20px;/*Added Line*/
}