Html 在与页面交互之前，图标不可见（鼠标悬停）

我有以下问题，我在网页上有一些社交图标。第一次加载页面时，图标不可见

当我浏览图标时，它变为可见并保持可见

.social-icons-float .social-icon {
   display: block;
   padding-bottom: 5px;
   font-size: 13px;
}

.social-icons-float .social-icon .social-count {
   display: block;
   border: 1px solid #e3e3e3;
   text-align: center;
   padding: 12px 0px;
   font-size: 24px;
   font-family: 'Titillium Web', sans-serif;
   font-weight: bold;
   color: #a0a0a0;
   position: relative;
   margin-bottom: 8px;
}

.social-icons-float .social-icon .social-count .social-arrow {
   display: block;
   overflow: hidden;
   height: 10px;
   position: absolute;
   bottom: -10px;
   width: 100%;
}

---

有人能帮我一下吗？

这种情况有时会发生，在谷歌浏览器中更常见。网站上的一些图片只是1px的边框块。一旦你将鼠标移到它们上面，它们就可见了

---

我知道，这只是个bug，与这里的代码无关！：-）

欢迎加入！我们如何看待或再现这个问题？JSFIDLE/codepen，例如HTML代码。您测试了哪个浏览器（在哪个操作系统中以及两者的哪个版本）？问题出在google chrome中。@user3460377，您是对的。我也经历过同样的事情！这是一个渲染图像的错误…与代码无关：）别担心。其他浏览器如何：好，失败，没有测试？哪一个？只有谷歌chrome，其余的都可以用。确实是谷歌chrome，我对此无能为力。不，这是谷歌chrome的一个缺陷！他们会解决这个问题的。你不能做任何与此相关的事情。。。。