html - 火狐漏洞 : Links outside block elements

Question

我早些时候听说 Firefox 在链接环绕 block 元素方面存在重大问题，最近它确实给了我一些问题。

有时(可能有 20% 的比率)出于某种原因更改此代码(请注意，所有元素在我的样式表中都定义为 block 元素):

<li>
  <a href="product.htm">
    <img src="product-image.jpg" width="100" height="100" alt="Product image" />
    <h2>Product title</h2>
    <p>Product description</p>
  </a>
</li>

进入这个:

<li>
  <a href="product.htm">
    <img width="100" height="100" alt="Product image" src="product-image.jpg">
  </a>
  <h2>
    <a _moz-rs-heading="" href="product.htm">Product title</a>
  </h2>
  <p></p>
  <p>
    <a href="product.htm">Product description</a>
  </p>
</li>

这会强制样式表以完全错误的方式显示元素；我使用 a 元素在网上商店产品列表中获取包含产品图片、标题和描述的大链接。

我想要那些大链接，但找不到替代方法。你有什么建议？

Answer 1

不知道权威度如何xhtml.com是，但他们确实说 a 标签只能包含:

• Inline elements, except a, at any depth
• Text

一个可能的解决方案是重新组织您的 HTML，使其更有意义(例如，不要试图将 block 级元素放入行内级元素中)。只需一个产品链接(可能在 h2 中或图像周围)。然后使用 JavaScript 检测 li 上任意位置的点击，并加载链接。

这有意义吗？ Here's an example.