浏览器在表格中添加重复的标题元素

Question

我有这个简单的 html table:

<!DOCTYPE html>
<html lang="pt" >
<head>
<style>
caption {margin-bottom: 24px}
</style>
</head>
<body>
<table>
 <caption>My caption<caption>
 <tr><td>a</td><td>1</td></tr>
 <tr><td>b</td><td>2</td></tr>
 <tr><td>c</td><td>3</td></tr>
 <tr><td>d</td><td>4</td></tr>
</table>

</body></html>

现在在 Chrome 和 Firefox 中使用 "inspect element"（尚未在其他浏览器中测试），我发现这两种浏览器都在代码中插入了一个额外的空标题标签，位于原始标签下方。

现在，如上例所示，我在标题元素上有一个边距，在 Chrome 中，边距重复了，所以我得到了 48 像素的底部边距，而不是所需的 24 像素，因为它应用于两个标题标签，但在 Firefox 中，边距不应用于空标题，因此结果边距为 24px。

那么为什么浏览器会插入这个空的标题标签？

Answer 1

这是因为您没有关闭 <caption> 元素。当浏览器看到它时，它会插入附加标签。

caption {
  margin-bottom: 24px
}

<table>
  <caption>My caption</caption>
  <tr>
    <td>a</td>
    <td>1</td>
  </tr>
  <tr>
    <td>b</td>
    <td>2</td>
  </tr>
  <tr>
    <td>c</td>
    <td>3</td>
  </tr>
  <tr>
    <td>d</td>
    <td>4</td>
  </tr>
</table>

浏览器在表格中添加重复的标题元素

Browsers adding duplicate caption element in tables

html

caption