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

超链接背景图像仅在Quirks模式下在IE中可见

1 个答案: