Question

我可以在<a></a>内公平地放置哪种HTML元素？
我喜欢制作以下内容

<a href="#" title="Click the icon">
    <div style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9000;">
        <h3>
            Lorem ipsum
        </h3>
    </div>
</a>

或

<ul>
    <a href="#" title="Click the icon">
        <li style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9999;">
            <h3>
                Lorem ipsum
            </h3>
        </li>
    </a>
</ul>

，但我认为不可接受。 w3验证员说同样的话。

也许这可以解决问题：

<a href="#" title="Click the icon">
    <span style="display: block; padding: 1em; background-image: url('1_tn.png'); text-indent: -9999;">
        Lorem ipsum
    </span>
</a>

但在这种情况下 - 正如我认为的那样 - 将<span>元素转换为阻止无效并且可能导致浏览器的差异。

您对此有一些经验吗？

Answer 1

4.01规范基本上表示锚元素（或所有内联元素）不能具有块级子元素，因此您尝试采用的方法无效。当然你可以这样做（跨度方法更适合兼容性，因为它应该验证）但如果这对你很重要，它就不会是语义的。

Answer 2

看起来您正在尝试使用图像替换来将h3文本转换为图像链接，对吗？看看http://jsfiddle.net/QKtWq/2/

HTML：

<h3>
  <a href="#" title="Click me!">Lorem ipsum</a>
</h3>

CSS：

h3 {
    background: black url('http://jsfiddle.net/img/logo.png') no-repeat;
    text-indent: -9000px;
    height:100px; /* usually set to the height of the image */
}
h3 a {
    display:block;
    height:100%;
}

如果您不希望它为100％，您还可以在h3上设置特定宽度。

编辑：从h3 css中删除display：block。标题已经是块元素。

使用display：block来查看<a></a>中的一个元素？

2 个答案: