由于 AdBlock 问题，图像未在 Firefox（引导 + Wordpress）上显示

Question

我使用 Wordpress + Bootstrap 编写了这段代码，但不知何故，图像没有在 Firefox 中显示，但是，它们在任何其他浏览器中都能正确显示。我在 SO 上进行了搜索，找到了一些与禁用广告屏蔽相关的答案，但它并没有解决问题，所以我在这里很迷茫。

相关的 HTML 部分

<div class="navbar-collapse collapse ">
  <ul class="nav navbar-nav">
    <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-12 active"><a title="Home" href="/">Home</a>
    </li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a title="Carriers" href="/our-carriers/">Carriers</a>
    </li>
    <li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a title="Our Story" href="/our-story/">Our Story</a>
    </li>
    <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a title="Employees" href="/employees/">Employees</a>
    </li>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a title="Contact Us" href="/contact-us/">Contact Us</a>
    </li>
    <li class="menu-item">
      <div class="col-fb">
        <a href="https://www.facebook.com/pages/xxxxx">
          <img class="like_us" src="xxxxx/wp-content/themes/xxx_Theme/images/fb_like.png" alt="Like AIG on Facebook" />
        </a>
      </div>
    </li>
  </ul>
</div>

这是 CSS。我添加了最后两行以尝试“强制”显示，但什么也没发生，例外的是元素现在具有宽度和高度，而在我添加这些行之前它们没有：

.navbar-brand {
  line-height: 1px !important;
  margin: 0 !important;
  padding: 3px 15px
}
#nav,
.navbar {
  border: 0;
  position: relative;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 24px;
}
.nav-header ul {
  min-height: 300px;
  background: #3f4646;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.navbar-collapse.collapse {
  padding: 0 !important;
  background: #7f8c8d;
  z-index: 100000000 !important;
}
li.active a {
  background: transparent !important;
}
ul.navbar-nav {
  margin: 0 !important;
  position: relative;
  top: 0px
}
.navbar li {
  padding: 0 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.5)
}
.navbar li a {
  color: #fff !important;
}
.navbar li a:hover {
  color: #2c3e50 !important
}
.navbar .container {
  max-height: 40px;
  margin: 0 auto !important;
  top: 0px !important;
  position: relative;
  z-index: 100000000 !important;
  border: none
}
.nav-header ul {
  padding: 10px;
}
.nav-header ul li {
  display: block;
  padding: 2px 10px !important;
  margin: 0 !important;
  font-size: 10px
}
.col-fb a,
.col-fb {
  display: block;
  max-width: 100%;
  max-height: 100%;
  min-width: 150px;
  min-height: 50px;
  padding: 5px;
  position: relative;
  z-index: 100000
}
.col-fb img {
  display: block;
  width: 140px;
  max-height: 100%;
  min-height: 30px;
  position: relative;
  z-index: 1000100;
  height: auto;
}

作为附加信息，虽然您可能会看到图像有一个 fb_like 类，但当我检查 Firefox 检查器时，它添加了一个随机类：cprflzcqqyowaemjgtdl

知道我做错了什么或如何解决这个问题吗？

编辑：这实际上是一个 AdBlock 问题，所以我需要知道如何覆盖该问题，因为我可以禁用它，但我当然需要允许每个人这样做

Answer 1

我自己找到了答案。

我从链接开始替换了与 Facebook 相关的所有内容，我用 bit.ly 重定向替换了该链接，但这还不够。然后换了alt，还是不行。将所有出现的 fb* 更改为 fk* 和 bam!，AdBlock 没有捕捉到它，现在图像按预期显示。仅供参考，以下是任何遇到此问题的人的代码，使用 WP Nav Walker 和 Bootstrap 代码：

<?php
	$fblike = get_template_directory_uri();
	wp_nav_menu( array(
		'menu'              => 'primary',
		'depth'             => 2,
		'container'         => 'div',
		'container_class'   => 'navbar-collapse collapse ',
		'items_wrap' 		=> '<ul class="nav navbar-nav">%3$s<li class="menu-item"><div class="col-fk"><a href="http://on.fb.me/xxxxxx"><img class="like_us" src="'.$fblike.'/images/fk_like.png" alt="" /></a></div></li></ul>',
		'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
		'walker'            => new wp_bootstrap_navwalker())
	);
?>

看起来很愚蠢，而且很可能是。但它有效，所以希望它对任何寻找这个问题的答案的人有所帮助