web-dev-qa-db-ja.com

：after、：before Internet Explorer 11の問題

私のウェブサイトのデザインでは、: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.グーグルクロームで

Menu in google chrome

2. Internet Explorer 11の場合

Menu in internet Explorer 11

IEこのCSSを防止していますか？in :: beforeのすべてのスタイルがIE11で取り消し線として表示されているためです。

私のウェブサイトへのリンク

cssstylesstylesheet
14
Arun

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*/
}
7
Kheema Pandey