正确的HTML链接格式-两个内联块跨距是否可以位于一个锚定标记内？[副本]

Question

我正在制作一个网站，它利用span和背景图像：（基本上是一幅图片），span嵌套在其中，可以在图片上显示文本。

文本和图片跨距都是指向同一位置的链接。我希望我的用户能够单击文本或图片上的任何位置，以从页面中导航出去。

而不是使用两个标签，将链接到同一件事在同一行代码，我注意到我可以把两个跨度，图片和文本，在同一个标签和Chrome允许它不知道其他浏览器对这种事情的支持如何。

下面是我正在做的一个例子：

<a href="https://theartofmikeyjoyce.com/">
  <span class="cell E4">
   <span class="text">MIKEY<br/>
       <p>IN THE CLUB II</p>DIGITAL COLLAGE
   </span>
  </span>
</a>

现在通常我知道锚定标记不应该有内联元素，所以我在span标记上设置了display:inline block'。我也在使用HTML5，我在上面找到的文档充其量也很模糊。这段代码似乎适用于我测试过的所有现代浏览器，但这真的是佳能吗？

Answer 1

我想这就是你要找的。

• HTML5声明元素“可以围绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互内容（例如按钮或其他链接）”
• 通常不会，但如果设置为display:inline，则应该可以

Answer 2

HTML和CSS是两个独立的东西。HTML5定义了哪些元素可以嵌套在哪些其他元素中，哪些元素不可以嵌套在哪些其他元素中，虽然HTML5还建议如何显示这些元素，但CSS指定了如何实现这种显示。

更改元素的CSS显示模式不会更改它在HTML文档中的显示位置，因为HTML不知道如何使用CSS显示元素（如果有的话）。

>

在HTML5中，a元素有一个透明的内容模型，这意味着任何元素都可以显示为a元素的子元素，前提是该元素可以显示为a元素父元素的子元素。例如，当一个部分

这些是超文本标记语言标准给出的规则，但是正如您所看到的，它们没有说明内联元素是否可以包含内联块元素。您将在CSS标准中找到这些信息。

总之，内联块元素类似于块盒，只是它们是内联放置的，就像常规内联元素一样。就这些。假设a元素是一个内联元素，浏览器应该可以沿着a元素（当然是它的子元素）的同一行渲染内联块。

另一方面，如果您的一个元素包含块级元素（即show： block），则该行为虽然定义得很好，但由于像Chrome这样的浏览器，变得不太可预测。