:after,:before Internet Explorer 11中的问题 [英] :after, :before issues in internet explorer 11
问题描述
在我的网站设计中,我使用的是:before
和:after
伪元素.这些在Google chrome和firefox中运行良好.但是在使用Internet Explorer时遇到了麻烦.
In my website design, I am using :before
and :after
pseudo elements. These are working good in Google chrome and firefox. But having trouble with 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.在Google Chrome浏览器中
1.In google chrome
2.在Internet Explorer 11中
2.In internet explorer 11
IE是否阻止了此CSS?因为所有在:: before中具有的样式在IE11中均已删除.
is IE preventing this css? because all the styles with in ::before are shown as striked out in IE11.
这是链接到我的网站
推荐答案
在包括IE11在内的所有浏览器中,您都需要稍微修改一下CSS才能使下拉箭头对齐.请使用此CSS.
You have to modified your CSS a little bit to align the drop arrow in all browsers including IE11. Please use this 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*/
}
这篇关于:after,:before Internet Explorer 11中的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!