css - 将 包裹在 中， 无效

Question

我有一个包含网格项的网格，我将它们包裹在 标签中，以便整个元素都指向链接。我真的想要有效的 html。

          <!--Grid Item-->
          <figure class="grid-item">
              <span>
                <a href="#">
                  <img src="images/image.jpg">
                  <figcaption>
                      <h1>Title</h1>
                      <p>Description</p>
                  </figcaption>
                  <div class="item-background"></div>
                </a>
              </span>
          </figure>
          <!--End Grid Item-->

在某些悬停效果中，元素背景和文字说明位于图像上方，大量图像被暴露并且没有链接。我用这个结构创建了很多悬停效果。我知道这在 html5 中有效，但我想在 html4 验证器中出现错误。另外，我听说这是不好的做法。如果可能，我不想添加任何 javascript。

我应该保持现在的方式还是有一种不干扰设计的有效方式。

Answer 1

I know this is valid in html5

然后您可以通过将文档标记为 HTML 5 使其有效。

…或者如果那是正确的，你也可以。您还需要移动 anchor ，使其完全位于 figcaption 内或完全围绕 figure。

but I want to come up error free in html4 validator.

那不会发生。

• HTML 4 不支持 anchor 中的 block 元素。
• HTML 4 不支持图形元素。
• HTML 4 不支持 figcaption 元素。

如果您想使用本世纪引入 HTML 的功能，那么您需要使用本世纪编写的 HTML 规范。

I don't want to add any javascript if possible.

使用 JavaScript 注入(inject)内容而不是将其放入 HTML 将使 HTML 有效。但这将是一个糟糕的黑客攻击，它错过了首先使用验证器的要点。