字体很棒的 fa-stack 问题与 css 不应用 Chrome PC

Question

我有一些代码显示未读消息的通知，其形式是字体很棒的收件箱，带有红色圆圈警报和未读消息的数量。该代码在 firefox（mac 和 pc），即和 chrome PC 中运行良好（到目前为止已测试）。

这是我使用的例子http://codepen.io/johnstuif/pen/pvLgYp

这是在 Firefox (Mac) 上的样子

它不适用于 Chrome (Mac)。我可以看到收件箱，但看不到红色圆圈和数字。

.fa-stack 
{
    margin-bottom: -60px;
}
  
.fa-stack[data-count]:after
{
position:absolute;
right:66.9%;
top:-5%;
content: attr(data-count);
font-size:30%;
padding:.5em;
border-radius:999px;
line-height:.60em;
color: white;
background:rgba(255,0,0,.85);
text-align:center;
min-width:.1em;
font-weight:bold;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="inbox_container" style="margin-top: -9px">
<span class="fa-stack fa-2x" id="inbox_total" data-count="3">
    <i class="fa fa-inbox"></i>
</span>
</a>

我假设浏览器存在错误问题，但我终其一生都无法弄清楚如何让它与 Chrome (mac) 一起使用。

Answer 1

我从一些搜索中发现，我所要做的就是做一个clearing of chrome cache and a hard reset，它现在可以工作了。

太棒了！