将链接 <a> 包裹在 <div> 周围

Question

是否可以像这样在<div>s 周围包裹<a> 标签：

<a href=etc etc>
    <div class="layout">
        <div class="title">
        Video Type
            <div class="description">Video description</div>
        </div>
    </div>
</a>

Eclipse 告诉我 div 的位置不对？ 如果这是不允许的。如何使整个“布局”类成为链接？

Answer 1

这种结构在 HTML5 中是有效的，因为在 HTML5 中，锚点几乎可以包裹任何元素，除了其他锚点和表单控件。现在大多数浏览器都支持这一点，并将问题中的代码解析为有效的 HTML。下面的答案写于 2011 年，如果您支持旧版浏览器（*cough* Internet Explorer *cough*），它可能会很有用。

---

没有 HTML5 解析器的旧版浏览器（比如 Firefox 3.6）仍然会对此感到困惑，并且可能会弄乱 DOM 结构。

HTML4 的三个选项 - 使用所有内联元素：

<a href=etc etc>
    <span class="layout">
        <span class="title">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

然后用display: block设置样式

---

使用 JavaScript 和:hover：

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

和（假设 jQuery）

$('.layout').click(function(){
    // Do something
}):

和

.layout:hover {
    // Hover effect
}

---

或者最后使用绝对定位放置一个a的锚点，用CSS覆盖整个.layout

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a class="more_link" href="somewhere">More information</a>
</div>

还有 CSS：

.layout {
    position: relative;
}

.layout .more_link {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -9999px;
    z-index: 1000;
}

当然，这不适用于旧版本的 IE。