徽标图像仅显示在 Chrome 桌面中答案

【问题标题】：Logo image only displays in Chrome desktop徽标图像仅显示在 Chrome 桌面中
【发布时间】：2018-01-11 19:06:55
【问题描述】：

在 Chrome 中查看时，我们在此网站上的徽标通常显示在左上方。在 Firefox 和 Opera 中缺失。使用检查工具，HTML <img class="brand-logo" alt="Holder's Total Security" src="https://holdersecurity.com/wp-content/themes/holders/images/brand-logo.png"> 在 Chrome 中看起来很正常，但在 Firefox 中显得苍白。显然是想告诉我一些事情。

我觉得这让我很难过，因为最初的开发者使用了 ::before 和 ::after 伪元素，我很少使用它们。

网站...example of problem

【问题讨论】：

试图查看，但是围绕 logo 的锚标签设置为 display: none;
这看起来确实是 Twitter Bootstrap 类的问题。我会仔细看看那些。
我也刚刚注意到锚标签<a href="https://holdersecurity.com/" class="visible-lg visible-md visible-sm hidden-xs"> ...而且它的CSS足够复杂，可以让您忙碌一段时间。

标签： css google-chrome pseudo-element

【解决方案1】：

我隔离了与“响应式实用程序”有关的部分 Bootstrap CSS。然后将它们与分配给 a 标签 (visible-lg visible-md visible-sm hidden-xs) 的类进行比较。

然后我确保以下内容位于我的主样式表的底部...

.visible-lg .visible-md .visible-sm .hidden-xs { display:block!important; }

徽标现在可以正常显示，但我不知道为什么在运行了几个月后它突然坏掉了。将其归结为 Wordpress 过于复杂。

【讨论】：