带有类的图形标签中的 img 标签不起作用答案

【问题标题】：img tag in figure tag with classes doesn't work带有类的图形标签中的 img 标签不起作用
【发布时间】：2014-03-13 20:17:37
【问题描述】：

我遇到了一个我自己无法弄清楚的奇怪错误。

我在图形标签内有一个图像标签（也使用 div 标签测试），但是当我向图形标签添加类时，图像不会显示。如果我不添加类，它会显示。

我使用的是带有编译器的 LESS，所以它会自动将其编译为 css。

该部分的 HTML：

        <div class="span9 clearfix">

            <figure class="ad-block fr top-ad">
                <a href=""><img src="http://lorempixel.com/468/60" alt="Ad" /></a>
            </figure>

        </div> <!-- end span9 -->

这些标签的 CSS：

.ad-block {
    .box-shadow(0px, 0px, 5px, @border-color);
    img {
        display: block;
    }
}

.top-ad {
    margin-bottom: 3px;
}

.fr { float: right; }

figure {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

显示错误的图片：

带标签

http://www.bildites.lv/images/2rzac0wyi01ekhhvn7b.png

无标签

http://www.bildites.lv/images/aq3agebpc7a5o3efltc.png

我尝试只使用一个类来测试事物。唯一有效的类是 fr(float:right;) 奇怪的是，即使我只留下 ad-block 或 top-ad 类并注释掉该类的所有 css 样式，图像仍然不显示。我无法弄清楚这一点。任何帮助将不胜感激。

我正在使用 localhost、xampp，如果这有什么改变的话。

编辑：事实证明，我最近添加到我的测试浏览器中的广告拦截器非常健忘。禁用它可以解决问题。感谢 Lister 先生和 jthe 的快速 cmets。 :)

【问题讨论】：

所以回顾一下，无论CSS如何，类ad-block和/或top-ad的容器中的图像都不会显示？多么奇怪。它会在所有浏览器上执行此操作，还是仅在安装了广告拦截器的浏览器上执行？
是的，看起来广告拦截器正在隐藏内容，因为它检测到一个类名包含“ad”关键字的块。我最近使用 facebook 容器和 ghostery chrome 插件遇到了同样的情况。
天哪。我通常在 Firefox 上测试所有内容，因为我知道我的 chrome 安装了 adblocker，但我忘记了我在几天前也将它添加到了 Firefox。我太健忘了实际上我很惊讶，那个广告拦截器只捕获了一个简单的图像作为广告。非常感谢。 :)

标签： html css class xampp less

【解决方案1】：

事实证明，我最近添加到我的测试浏览器中的广告拦截器非常健忘。禁用广告拦截器它解决了这个问题。感谢 Lister 先生和 jthe 的快速 cmets。 :)

【讨论】：