超链接背景图片仅在 IE 中以 Quirks 模式可见

Question

我的页面上有一个超链接：

<div id="ContainerDIV">
    <a href="#" id="hlkTest" class="imgLink" title="Test" />
</div>

和

a.imgLink#hlkTest {
    background-image: url(Images/DOS.png);
}

a.imgLink {
            width: 67px;
            height: 80px;
            background-position: 0px;
            background-repeat: no-repeat;
            margin-right: 0.45em;
            margin-bottom:0.5em;

 }

#ContainerDIV
{
    padding-left:2.5em;
    padding-top:0.0em;
    width:90%;
}

当页面在 Quirks 模式下使用 IE 打开时可见，但在标准模式和/或 Chrome 中不可见。我一直在试图弄清楚什么 CSS 只在 Quirks 模式下工作。任何人都可以帮忙吗？

Answer 1

尝试重新构建您的代码：

HTML

<div id="ContainerDIV">
    <a href="#" id="hlkTest" class="imgLink" title="Test"></a>
</div>

您的原始代码有一个自动关闭的锚标记。但是锚a 不是一个空元素。它需要一个适当的结束标签。更多详情请看这里：https://stackoverflow.com/a/31628634/3597276

CSS

#ContainerDIV {
    padding-left: 2.5em;
    padding-top: 0.0em;
    width: 90%;
}

#hlkTest {
    display: block;
    background-image: url("http://placehold.it/400x200");
    background-position: 0px;
    background-repeat: no-repeat;
    height: 200px;
    width: 400px;

 }

DEMO