Question

我之前听说过Firefox在块元素周围的链接存在一个主要问题，最近它给我带来了一些问题。

有时（可能是20％的速率），由于某种原因，更改此代码（请注意，所有元素都定义为样式表中的块元素）：

<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标记只能包含：

内联元素，除了a，在任何深度

文本

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

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

Answer 2

这些列表项的所有实例是否一致编码？（阅读：通过验证器运行整个事情。）你说它只发生了~20％的时间，所以你应该首先确定那些破坏的东西没什么不同。这似乎是浏览器部分的某种超级修正。搜索_moz-rs-heading会发现一堆旧帖子like this one。（注意那里引用的bug是固定的。）但在某些情况下，人们最终发现他们的实际<a>标签被破坏了，他们只是没有看到它，你发现的修改是Firefox的试图优雅地处理它。

Answer 3

我遇到了同样的问题：同样的HTML会以各种方式显示。每次我刷新页面时，Firefox每次都以不同的方式将<a>..</a>分成许多较小的<a>..</a><a>..</a>块。（几乎）每次错误显示。

This page是一个很好的资源，它建议将<div>直接放在<a>下面，但实际上我的网页设计师提供的页面已经提供了这一点。

所以我所做的就是用<div>替换我的<span style="display:block">并且现在有效。

<a ...>
   <span style="display:block">
      ...
   </span>
</a>

Firefox bug：链接块元素之外的链接

3 个答案: