Question

好的IE8大师（这样的东西存在吗？）。我需要一些帮助来解决使用:after伪选择器导致的问题。它非常直接 - 只是在悬停时在span标记之后添加边框（下划线）。不，简单的解决方案不仅仅是使用text-decoration属性，因为span标记内的元素是图像（以及其他一些原因）。

这是HTML：

<div class="cta">
    Hover over me
</div>

这是CSS：

.cta { position:relative; z-index:1; display:inline-block; }
.cta:after { position:absolute; z-index:1; left:0px; right:0px; bottom:0px; content:''; border-bottom:1px solid transparent; }
.cta:hover:after { border-color:rgba(0,136,204,.6); }

对于那些真正有兴趣帮助并想要玩它的人，这里是fiddle。

为什么它在IE8上不起作用？适用于所有其他浏览器。我甚至试图删除所有悬停的废话，但我仍然无法显示边框。我还尝试在互联网上遇到的一些事情中向display:block div添加width:100%和.cta。没有骰子。

有什么想法吗？

Answer 1

IE8及更低版本不支持rgba，因此请尝试使用rgb添加后备广告： DEMO

.cta:hover:after
{
    border-bottom:1px solid rgb(0,136,204);
    border-bottom:1px solid rgba(0,136,204,.6);
}

来源：http://css-tricks.com/rgba-browser-support/

IE8边框使用伪：之后

1 个答案: