IE8仅在鼠标悬停时显示背景图像

Question

我在IE8上遇到了一个奇怪的错误。我在特定div的::after伪元素上有一个背景图像，当下拉列表打开/关闭时会更改。问题是：仅在IE8上，当我打开下拉列表时，图像不会改变，直到我将鼠标悬停在页面区域之外。然后，显示图像。

一些图片来说明情况：

打开下拉列表...

然后图像终于出现了

我的HTML代码：

<ul class="nav navbar-nav">
<div class="ul-title duvidas" data-toggle="collapse" data-target="#ajuda-collapse-1" aria-expanded="false">
    <div class="ul-collapse" id="topic-maquininhas">Test
         <!-- ::after goes here -->
    </div>
</div>
<div class="collapse subtopic-container" id="ajuda-collapse-1">
    <li id="subtopic-maquininhas-mensagens">
        Subtest1
    </li>
    <li id="subtopic-maquininhas-utilizacao">
        Subtest2
    </li>
    <li id="subtopic-maquininhas-servicos">
        Subtest3
    </li>
    <li id="subtopic-maquininhas-suporte">
        Subtest4
    </li>
</div>
</ul>

：在CSS（扩展）之后

ul.active .ul-title.duvidas > .ul-collapse:after {
content: "";
float: right;
width: 16px;
height: 10px;
margin-top: 6px;
background: url(../images/sprites.png) no-repeat -118px -34px;
}

：CSS（折叠后）

.ul-title.duvidas > .ul-collapse:after {
content: "";
float: right;
width: 16px;
height: 10px;
margin-top: 6px;
background: url(../images/sprites.png) no-repeat -70px -34px;
}

Answer 1

也许这是你的问题：

  

在Windows Internet Explorer 8以及IE8标准模式下的Windows Internet Explorer的更高版本中，只识别此伪元素的单冒号形式 - 即：after。

来源：https://msdn.microsoft.com/de-de/library/cc304076(v=vs.85).aspx

编辑：看来这是一个IE8 Bug，其中伪：在你放置它的图像后面显示元素。尝试提高你的：after元素

的z-index