答:在IE 8/9/10中不能点击之前的伪元素

Question

我正在尝试更新现有程序的ui，只使用CSS。在可能的情况下，我尝试使用CSS元素来代替背景图像。

我使用了一个:before伪元素为下拉菜单添加一个箭头。这在FF、Chrome和IE 11+中都很有效。然而，在IE8/9/10中，伪元素是不可点击的(只显示一个文本光标)。伪元素正被放置在锚点元素上。

下面是简化的代码。你可以在小提琴上看到这一点：https://jsfiddle.net/ejw6gxpb/

HTML：

<a href="#">select</a>

CSS：

a {
    text-indent:9999px;
    font-size:0px;
    width:16px;
    height:16px;
    overflow:hidden;
    position:relative;
}

a:before {
    content:"\25bc";
    position:absolute;
    top:0;
    right:0;
    font-size:12px;    
}

到目前为止，我已经尝试更改了z索引，将元素前面的a和a:的不透明度设置为0，并调整了大小、背景颜色和位置。似乎没有什么能让事情有所不同。有什么想法吗？

Answer 1

在使用小提琴的过程中，我意识到在上面的示例中，我说的是将:before应用于a元素，而实际上我实际上是将:before应用于容器元素。

我认为:before内容位于a元素之上，本质上掩盖了它。一旦我意识到这一点，我就能够纠正这种情况，现在它可以很好地跨浏览器工作。

谢谢!