Question

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

我正在使用：before伪元素为下拉菜单添加箭头。这适用于FF，Chrome和IE 11+。但是，在IE 8/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-index，给出a和a：before元素之前的不透明度，并使用大小调整，背景颜色和定位。似乎没有什么区别。有什么想法吗？

Answer 1

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

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

谢谢！

a：在IE 8/9/10之前，伪元素无法点击

1 个答案: