一个使用<a>标签的可点击<li>元素 - 不能使用JS。这是否是合法的HTML？

Question

好的，我已经多次阅读过内联元素不应包含块级元素的说法。我同意，这会带来一些问题，并且可能变得混乱。但我发现这是实现以下内容的唯一解决方案：

我正在尝试创建一个HTML模板，模仿Metro UI“瓷砖”（是的，就是Windows 8中的那个）。瓷砖使用<li>元素制作。现在，问题在于我想让整个瓷砖（完整的<li>标签）可点击，但正确的HTML告诉我不能用内联元素包围块级元素。此外，你也不能用<a>包围<li>。有没有不违反HTML规则的方法来实现这个目标？

- Joseph

---

你介意分享代码吗？ - Prashant Bhate

Answer 1

一种合法和清晰的方法是使用 inline-block 样式来设置 A 标签，并让它们填满整个 LI。

LI > A
{
    display: inline-block;
}

或者

LI > A
{
    display: block;
}

这将在IE7及以上版本以及最新版本的Firefox，Chrome，Safari，Opera等浏览器中工作。

请注意，在HTML 5的当前“草案”中，放置更多种类的元素到锚点标签中是合法的（参见“允许的内容”和示例）：http://dev.w3.org/html5/markup/a.html

附加文章：http://html5doctor.com/block-level-links-in-html-5/

- Tim M.

---

如果我这样做，将块元素放在<a>标签中是否合法？<a>是一个内联元素。 - Joseph

@fskreuz - 请看我的更新答案。总的来说，在HTML 5中是合法的。但请在较旧的浏览器中进行仔细测试。 - Tim M.

既然在HTML5中是合法的，那么对于老版本的浏览器有什么建议吗？ - Joseph

@fskreuz - 我曾在IE7和IE8中使用锚点内的块级内容而没有任何问题。但是，我注意到在IE7中使用HTML 5 doctype时存在问题。我建议尝试一下，如果遇到问题，请使用您的具体代码打开另一个问题。 - Tim M.

它可以工作！尽管验证将不允许（我正在使用XHTML严格模式）。为了兼容IE6，我没有使用>，而是使用类。最后，<a>应该具有overflow:hidden修复程序以填满整个容器。 - Joseph

Answer 2

如果您查看stackoverflow菜单，您会发现它非常简单。您只需将<a>放置在<li>内部，将其设置为显示块并给它所需的填充以实现块感觉即可。

- Ben

---

与堆栈菜单的区别在于，它仅包含位于<li>中的<a>标签中的文本，这是完全合法的。然而，在我的情况下，<a>标签不仅包含文本，还可能包含段落等块级元素。尽管如此，在行内场景中仍然是块级元素。 - Joseph