Question

我有这个简单的html表：

＆＃13;

<!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>

＆＃13;

现在使用＆＃34;检查元素＆＃34;在Chrome和Firefox中（尚未在其他浏览器中测试）我发现两个浏览器都在代码中插入了一个额外的空标题标记，位于原始标记之下。

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

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

Answer 1

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

＆＃13;

caption {
  margin-bottom: 24px
}

＆＃13;

<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>

＆＃13;

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

1 个答案: