0

<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>元素转换为块是无效的，并且可能会导致浏览器的差异。

你有这方面的经验吗？

4

2 回答 2

4

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

于 2012-10-29T15:59:11.740 回答
3

看起来您正在尝试使用图像替换将您的 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。标头已经是块元素。

于 2012-10-29T16:18:44.327 回答