有低於HTML5

帆布/視頻/音頻元素4PX差距在使用HTML5，如果你把一個canvas/video/audio/svg元素在div，就會有這些元素低於4px差距。我在幾乎所有支持HTML5的瀏覽器中測試了下面的代碼，不幸的是它們都有相同的問題。有低於HTML5

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Bug</title> 
</head> 
<body> 
<div style="border: 1px solid blue"> 
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas> 
</div> 
</body> 
</html>

來源

2011-12-22 user994778

這是因爲它們與可調整大小的height內聯元素（最inline元素是沒有明確調整大小）。如果你將它們設置爲display: block;，那麼差距就會消失。您也可以設置vertical-align: top;以獲得相同的結果。

演示：http://jsfiddle.net/ThinkingStiff/F2LAK/

HTML：

<div class="container"> 
    <canvas width="200" height="100"></canvas> 
</div> 
<div class="container"> 
    <canvas id="block" width="200" height="100"></canvas> 
</div>

CSS：

.container { 
    border: 1px solid blue; 
} 

canvas { 
    border: 1px solid red; 
} 

#block { 
    display: block; 
}

輸出：

enter image description here

來源

2011-12-22 07:44:00 ThinkingStiff

非常感謝！但是，如果設置爲{display：inline-block}，則會再次出現間隔。爲什麼這些元素的行爲與其他行內元素不同？ – user994778 2011-12-22 08:16:25

'img'以同樣的方式工作。它是可調整「高度」的「內聯」元素。 'vertical-align：top;'如果你想保持元素'inline'，則解決問題。 – ThinkingStiff 2011-12-22 08:31:22

{vertical-align：top;}這真的是我想要的！你太棒了！ – user994778 2011-12-22 08:57:40

保證金-5px工作在Firefox瀏覽器。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Bug</title> 
</head> 
<body> 
<div style="border: 1px solid blue"> 
<canvas width="200" height="100" style="border: 1px solid yellow; margin-bottom:-5px"></canvas> 
</div> 
</body> 
</html>

來源

2011-12-22 07:16:59 Teg

謝謝您的回答。我只是想知道爲什麼所有瀏覽器都有類似的問題？我找不到任何有關此默認樣式。 – user994778 2011-12-22 07:25:50

我承認我不知道 – Teg 2011-12-22 07:37:36

請注意，在這種情況下它的大小是5px，因爲您已經設置了1px厚度的邊框，所以如果您刪除了邊框，則只有4px。無論如何，這個解決方案似乎很髒，我喜歡vertical-align：top; - 在接受的答案更多的方法:)。 – 2014-09-02 11:45:17

有低於HTML5

回答

相關問題