:after, :before Internet Explorer 11 中的问题

Posted 2023-02-22

【中文标题】:after, :before Internet Explorer 11 中的问题

【英文标题】：:after, :before issues in internet explorer 11

【发布时间】：2014-10-09 23:34:23

【问题描述】：

在我的网站设计中，我使用了: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 中都显示为被删除。

这里是link to my website

【问题讨论】：

发布你的相关代码 :before 或更好，如果你做了一个小提琴

您实际上使用的是:after 和:before，而不是::after 和::before。

@MelanciaUK：我添加了网站链接

:: 是一种 CSS3 语法，尚未在所有浏览器上得到广泛支持，但 : 是一种所有浏览器都接受的 CSS2 语法。

【参考方案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*/