Css ul元素上的伪元素在IE11中不起作用
我有一个菜单,设置了一个伪元素作为背景色。之所以需要伪元素,是因为虽然菜单本身不是全宽的,但背景必须是全宽的。我设置了一个我认为非常简单的元素 这是我的html和注释Css ul元素上的伪元素在IE11中不起作用,css,internet-explorer,internet-explorer-11,Css,Internet Explorer,Internet Explorer 11,我有一个菜单,设置了一个伪元素作为背景色。之所以需要伪元素,是因为虽然菜单本身不是全宽的,但背景必须是全宽的。我设置了一个我认为非常简单的元素 这是我的html和注释 <div class="primary-menu"> <nav class="menu-primary-menu-container"> <ul id="menu-primary-menu" class="menu"> <li id="menu-item-7031"
<div class="primary-menu">
<nav class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu">
<li id="menu-item-7031" class="first-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7031">
//hovering this li triggers the sub-menu visibility, the pseudo element is also lined up to this element
<a href="#">Solutions</a>
<ul class="sub-menu">
//pseudo element should show up here
<li id="menu-item-8916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8916"><a href="#">Solutions Overview</a></li>
<li id="menu-item-7787" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7787"><a href="#">Data Lake</a></li>
<li id="menu-item-7541" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7541"><a href="#">Real-Time Analytics</a></li>
<li id="menu-item-7540" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7540"><a href="#">Cloud Data Integration</a>
<ul class="sub-menu">
<li id="menu-item-7854" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7854"><a href="#">Data Integration into Azure</a>
<ul class="sub-menu">
<li id="menu-item-8393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8393"><a href="#">Azure FAQ</a></li>
<li id="menu-item-8394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8394"><a href="#">Getting Started with Azure</a></li>
</ul>
</li>
<li id="menu-item-7853" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7853"><a href="#">Data Integration into AWS</a>
<ul class="sub-menu">
<li id="menu-item-11470" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11470"><a href="#">Getting Started with AWS</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
在IE11中,伪元素的属性都被划掉,并应用于.sub菜单ul,before元素应该从该菜单生成。我添加了一个显示:block;财产,但这无助于解决我的问题
这就是我检查元素时在IE11中显示的内容
根据我的经验,你不能用IE检查
::after
或::before
,因此属性都被划掉了,只是因为在某种程度上它们不属于所选元素本身,而是属于其伪元素
我发现唯一能让它看起来像其他浏览器的方法是更改::before
:样式的某些属性值
header .wrapper .primary-menu #menu-primary-menu > li > .sub-menu::before {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
content: "";
display: block;
height: 470px;
position: absolute;
top: -1rem;
/* Set width to auto */
width: auto;
z-index: -1;
/* Make a huge overflow (i doesn't have to be that big) */
right: -9999px;
left: -9999px;
}
希望有帮助。您能提供一个我们可以测试的完整示例吗?我在底部包含了一个用于测试的codepen链接:)问题是背景显示在右侧?寻求代码帮助的问题必须包含在问题本身(而不是远程链接)中复制它所需的最短代码,最好是在堆栈片段中。虽然您提供了一个链接,但如果该链接无效,您的问题对其他将来遇到相同问题的用户将毫无价值。看,我很困惑。问题中包含重现问题的代码。你是救命恩人!非常感谢你的智慧:)很高兴我能帮助你!
header .wrapper .primary-menu #menu-primary-menu > li > .sub-menu::before {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
content: "";
display: block;
height: 470px;
position: absolute;
top: -1rem;
/* Set width to auto */
width: auto;
z-index: -1;
/* Make a huge overflow (i doesn't have to be that big) */
right: -9999px;
left: -9999px;
}