Question

我正在创建一个网站，该网站使用的跨度为background-image:（基本上是图片），其中嵌套的跨度会在图片上显示文字。

文字和图片跨度都是指向同一个地方的链接。我希望我的用户能够点击文本或图片上的任意位置以离开页面。

我没有使用两个标签链接到同一行代码中的相同内容，而是注意到我可以将两个跨度（图片和文本）放在同一个标签内，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

HTML和CSS是两个不同的东西。 HTML5定义哪些元素可以嵌套在哪些元素中，也可以不嵌套在哪些元素中，虽然它也表明了它们应该如何显示，但是如何实现这种显示是由CSS指定的。

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

在HTML 4中，a元素may only contain other inline elements。请注意，HTML 4有自己的定义＆＃34; inline＆＃34;并且大多数（如果不是全部）内联元素对应于CSS中的display: inline，但同样，这两种语言是分开的。
在HTML5中，a元素has a transparent content model，表示任何元素都可以显示为a元素提供的子元素该元素可以显示为a元素父级的子级。例如，虽然section > a可以有div作为孩子，但p > a不能，因为div可能会出现在section内，但从不在p。

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

总之，内联块元素与块框类似，只是它们是laid inline，就像常规内联元素一样。这就是它的全部内容。假设您的a元素是一个内联元素，浏览器在与a元素相同的行（当然是其子元素）上呈现内联块时应该没有问题。

另一方面，如果您的a元素包含块级元素（即display: block），则行为（pretty well-defined}仍会变为less predictable thanks to browsers like Chrome。

Answer 2

我认为this正是您所寻找的。

HTML 5声明元素＆＃34;可以包裹整个段落，列表，表格等，甚至整个部分，只要内部没有交互式内容（例如按钮或其他链接）＆＃ 34。
通常不会，但如果设置为display：inline则应该没问题。

正确的HTML链接格式 - 两个内联块跨度可以在一个<a> anchor tag?</a>内

2 个答案: