超链接背景图片仅在 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 打开页面时图像可见，但在标准模式下 and/or 在 Chrome 中不可见。我一直在试图找出什么 CSS 只在 Quirks 模式下工作。谁能帮忙？

Answer 1

尝试重新构建您的代码：

HTML

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

您的原始代码有一个自闭合锚标记。但是锚 a 不是空元素。它需要一个适当的结束标签。详情请见此处：

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

超链接背景图片仅在 IE 的 Quirks 模式下可见

Hyperlink background image only visible in IE in Quirks mode

css

internet-explorer

quirks-mode