Safari自动＆＃34;显示：无！重要＆＃34;不会加载图片

Question

我目前正在建立一个网站，除了一些图片（其他图片加载没有任何问题），所有内容都装得很好。我已经看到图像会自动获得CSS属性＆＃34;显示：无！重要＆＃34;。

这个问题只发生在Safari中（Chrome加载图片就好了！）

HTML：

FeatureContext.Current.FeatureInfo.Tags

CSS：

    <div id="socialLinks">
        <img src="img/social/white/linkedin.png" alt="linkedin">
        <img src="img/social/white/facebook.png" alt="facebook">
        <img src="img/social/white/google.png" alt="google">
        <img src="img/social/white/email.png" alt="email">
    </div>

我已经尝试了我能想到的一切。 Safari确实找到了图像路径，有时会显示alt attr。

提前致谢！

Answer 1

AdBlockers以多种方式工作，通常会尝试隐藏社交链接/号召性用语。

按顺序尝试这些步骤，并一起看看您需要做些什么才能让图片通过您的adBlock：

1. 将#socialLinks的ID更改为不同的
2. 从名为src的文件夹
更改图像的social以免提供
3. 将每个图像的名称更改为不同的名称，即：icon1.png
4. 将替代文字更改为没有社交媒体网站名称的内容
5. 放弃。导致其被阻止的href链接

Font Awesome自己遇到过这个问题：

  

＆＃34;显然，Adblock Plus可以使用＆＃34;删除社交媒体按钮＆＃34;删除Font Awesome品牌图标。设置。我们不会使用黑客来强迫它们显示。如果您认为这是一个错误，请报告Adblock Plus的问题。要解决此问题，您需要修改社交图标类名称。＆＃34;   来自http://fontawesome.io/icons/

Answer 2

对我来说，adblock阻止了我的图片，原因是图片的名称。 我的图片名称是：

  

与图像有关的东西728x90

他们阻止了728x90，因为它可以识别名称中的广告大小。

Answer 3

该问题与浏览器无关。我在使用Google Chrome浏览器时遇到了同样的问题。 这是因为您的浏览器中安装了广告拦截器扩展程序。您可以通过检查控制台上的“来源”部分来验证它，可以从ad-blocker.org中看到一个文件 因此，此广告拦截器的作用是，它会在您的网页上检查某些关键字，例如“ ad”，“ social”，并根据流行的社交媒体网站（例如“ facebook”，“ twitter”，“ linkedin”等）进行过滤，为所有这些元素添加display: none !important。 它检查所有选择器，包括id，class，name和alt属性。

该问题的解决方案是将您的类，id和其他属性重命名为广告拦截器无法提取的内容。例如：将类.social-icon重命名为.icons，将图像名称从facebook.svg重命名为fb.svg，将alt从alt="twitter"更改为{{1} }。 PFB将广告拦截器添加到我的页面的选择器集，以了解广告拦截器如何隐藏元素。