:之后,:在Internet Explorer 11中发布之前

Question

在我的网站设计,我使用: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中显示为stricked.

这是我网站的链接

Answer 1

您必须稍微修改CSS以对齐包括IE11在内的所有浏览器中的拖放箭头.请使用此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*/
}