使用伪 :after 的 IE8 边框答案

【问题标题】：IE8 border using pseudo :after使用伪 :after 的 IE8 边框
【发布时间】：2014-01-30 04:08:14
【问题描述】：

好的 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 和width:100% 添加到.cta div。没有骰子。

有什么想法吗？

【问题讨论】：

“为什么这在 IE8 上不起作用？”在你的问题中问和回答，哈哈。您是否尝试过使用十六进制值渲染它？

标签： html css

【解决方案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/

【讨论】：

@Adrift，我不是说要删除:hover，而是要添加一个额外的样式来删除透明度。
@Adrift：你说得对，我什至没有注意到这一点。谢谢你抓住它。改变了我的答案 - 透明不会被悬停时的边框颜色覆盖吗？
所以这确实解决了我的问题（及以上），但不能解决我正在处理的实际问题。除了rgba 属性之外，还必须是另一件事。总之，谢谢！！ IE8 只需要去...
同意。您可以尝试在上面的 css-tricks 链接中使用 IE 后备。