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中：整个链接（带有文本和内部图像的方块）通常用作链接，但图像的部分除外。在该部分单击链接时不起作用。但是，奇怪的是，当您将鼠标悬停在任何部分包括图像上时，仍会显示状态栏中的链接。

Answer 1

您应该提供更大的HTML示例，但我已经看到它无效：

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

您要么a元素作为ul元素的直接子元素，该元素无效。
或者，您没有包含ul元素，这也是无效的。
仅在li或ul元素（以及其他一些不常见的方案）中使用ol元素才有效。

有效的HTML看起来像这样（假设HTML5！）：

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

使用有效的HTML后，它应该可以在IE中使用。

（但是，你没有指定IE的版本，所以我只是猜测它会。）

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

HTML代码：

CSS：

问题：

1 个答案: