CSS :after, :before Internet Explorer 11 中的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25339854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:after, :before issues in internet explorer 11
提问by Arun
In my website design, I am using :beforeand :afterpseudo elements. These are working good in Google chrome and firefox. But having trouble with internet explorer.
在我的网站设计，我使用:before和:after伪元素。这些在 Google chrome 和 firefox 中运行良好。但是在使用 Internet Explorer 时遇到问题。
The code I am using is
我使用的代码是
#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;
}
and out puts are
和输出是
1.In google chrome
1.在谷歌浏览器中
2.In internet explorer 11
2.在Internet Explorer 11
is IE preventing this css? because all the styles with in ::before are shown as striked out in IE11.
IE 是否阻止了这个 css？因为在 ::before 中的所有样式在 IE11 中都显示为删除。
here is the link to my website
采纳答案by Kheema Pandey
You have to modified your CSS a little bit to align the drop arrow in all browsers including IE11. Please use this CSS.
您必须稍微修改 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*/
}
