: après,: avant les problèmes dans Internet Explorer 11

Question

Dans la conception de mon site Web, j'utilise :before et :after pseudo-éléments. Ceux-ci fonctionnent bien dans Google chrome et firefox. Mais avoir des problèmes avec Internet Explorer.

Le code que j'utilise est

#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;
}

et les sorties sont

1.Dans Google Chrome

Dans Internet Explorer 11

IE empêchant ce CSS? car tous les styles avec in :: before sont affichés comme rayés dans IE11.

voici le lien vers mon site

Answer 1

Vous devez modifier un peu votre CSS pour aligner la flèche de défilement dans tous les navigateurs, y compris IE11. Veuillez utiliser ce 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*/
}