html - 在 IE 中无法点击链接内列表项内的图像

Question

HTML代码:

<ul>
    <a href='index.php'> 
        <li>
            <img src='images/icons/home.png' alt='' />
            <p>Home</p>
        </li> 
    </a>
</ul>

CSS:

ul {

    height:100%;

    position: absolute;
    right: 0;
    text-align: left;
}

ul li {

    height: 100%;
    width:90px;
    float: left;
}

ul li p {
    margin-top: 4px;
    width: 100%;    
}


ul a li {
    display:block;
}

ul li img {
    margin-top: 8px;
    width: 43px;
    height: 43px;
}

(我在这里留下了除了字体之外的所有属性)

问题:

仅在 Internet Explorer 中:整个链接(这是一个内部有文本和图像的方 block )通常作为链接使用除了图像所在的部分。在该部分单击链接时不起作用。然而，奇怪的是，当您将鼠标悬停在任何部分(包括图像)上时，它仍然会在状态栏中显示链接。

Answer 1

您应该提供更大的 HTML 示例，但我已经可以看出它是无效的:

<a href='index.php'> 
    <li>
        ..
    </li> 
</a>

• 您可以将 a 元素作为无效的 ul 元素的直接子元素。
• 或者，您没有包含 ul 的元素，这也是无效的。
• 只有在 ul 或 ol 元素中使用 li 元素才有效(以及其他一些不太常见的情况)。

有效的 HTML 看起来像这样(假设是 HTML5!):

<ul>
    <li>
        <a href="#">
            <img src='images/icons/home.png' alt='' />
            <p>Home</p>
        </a>
    </li>
</ul>

一旦您使用了有效的 HTML，它应该可以在 IE 中工作。

(但是，您没有指定 IE 的版本，所以我只是猜测它会。)