【问题标题】:Safari automatic "display: none !important" won't load imageSafari 自动“显示:无!重要”不会加载图像
【发布时间】:2015-12-16 00:08:33
【问题描述】:

我目前正在建立一个网站,除了几张图片(其他图片加载没有任何问题)外,一切都正常加载。我已经看到图像会自动获取 CSS 属性“display: none !important”。

这个问题只发生在 Safari 中(Chrome 可以正常加载图片!)

HTML:

    <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>

CSS:

#socialLinks
{
    position: fixed;
    margin-top: -4%;
    float: right;
    top: 7%;
    left: 88vw;
}

我已经尝试了我能想到的一切。 Safari 确实会找到图像路径,并且有时会显示 alt 属性。

提前致谢!

【问题讨论】:

  • 他们从哪里得到display:none!important;?一些浏览器在页面初始化时不加载带有display:none的图片
  • 他们自己添加了这个。现在我确实发现它与我的 AdBlocker 有关。它阻止加载图像。这确实部分解决了问题。当我禁用我的 AdBlocker 时,图像会显示,但是当我激活我的 AdBlocker 时它们需要显示(因为它不是广告)
  • 这正是广告拦截器的作用

标签: html css image safari


【解决方案1】:

AdBlocker 以多种方式工作,并且经常会尝试隐藏社交链接/号召性用语。

按顺序尝试这些步骤,然后一起看看你必须做什么才能让图片通过你的 adBlock:

  1. #socialLinks 的 ID 更改为不同的 ID
  2. 将图像的src 更改为不从名为social 的文件夹中提供
  3. 将每个图像的名称更改为不同的名称,即:icon1.png
  4. 将替代文本更改为没有社交媒体网站名称的内容
  5. 放弃吧。是您的链接中的href 导致它们被阻止

Font Awesome 自己也遇到过这个问题:

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

【讨论】:

  • AdBlock Plus 还会阻止从“ad”或“ads”文件夹提供的图像。听起来很明显?它还会更改在 Web HTML 编辑器(例如 TinyMCE)中打开的此类页面的源代码,最终您会摸不着头脑,那个奇怪的类是如何进入代码的。
  • 这对我有用!谢谢你。例如,不要将类命名为“linkedin-logo”或将图像名称命名为“linkedin-logo.png”等。它们会被广告拦截器捕获。
【解决方案2】:

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

与图像相关的东西-728x90

他们屏蔽了 728x90,因为它可以识别名称中的广告尺寸。

【讨论】:

    【解决方案3】:

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

    解决此问题的方法是将您的类、id 和其他属性重命名为广告拦截器无法识别的名称。例如:将您的班级 .social-icon 重命名为 .icons,将您的图像名称从 facebook.svg 重命名为 fb.svg,将您的 alt 从 alt="twitter" 更改为 alt="tweet icon"。 PFB 广告拦截器添加到我的页面的一组选择器,以了解广告拦截器如何隐藏元素。

    【讨论】:

      猜你喜欢
      • 2019-05-19
      • 2012-12-07
      • 2021-05-20
      • 2018-01-12
      • 2010-09-17
      • 2016-06-29
      • 1970-01-01
      • 2012-08-22
      • 1970-01-01
      相关资源
      最近更新 更多