瀏覽器在表

我有這個簡單的HTML表格添加重複標題元素：瀏覽器在表

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

 
</body></html>

現在，使用「檢查元素」在Chrome和Firefox（沒有在其他瀏覽器測試）我請參閱這兩個瀏覽器在代碼中插入一個額外的空白標題標籤，低於原始標籤。

現在，如上面的示例所示，我在Chrome中的caption元素上留有餘量，邊距被重複，所以我得到的是48px底部邊距，而不是所需的24px，因爲它適用於標題標籤，但在Firefox中，保證金不適用於空白標題，因此產生的保證金爲24px。

那麼爲什麼這個空的標題標籤被瀏覽器插入？

來源

2015-02-07 ethmz

這是因爲您沒有關閉<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>

來源

2015-02-07 17:44:01

多數民衆贊成尷尬。抱歉。 – ethmz 2015-02-07 17:45:58

@thombr無需道歉..我認爲這是一個有效的問題。 – 2015-02-07 17:46:43

回答

相關問題