HTML5中的canvas / video / audio元素下方有一个4像素的空隙 [英] There is a 4px gap below canvas/video/audio elements in HTML5
问题描述
使用HTML5时,如果您放置画布
/ 视频
/ 在
div
中的code> / svg
元素,会有 4px
下面这些元素。我在几乎所有支持HTML5的浏览器中测试了下面的代码,不幸的是它们都有同样的问题。
When using HTML5, if you place a canvas
/video
/audio
/svg
element in a div
, there will be a 4px
gap below these elements. I tested the code below in almost all browsers which support HTML5, unfortunately they all have the same problem.
<!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>
推荐答案
这是因为它们是可调整大小的内联元素 height
(大多数 inline
元素不能显式调整大小)。如果将它们设置为 display:block;
,间隙消失。您也可以设置 vertical-align:top;
以获得相同的结果。
It's because they are inline elements with resizable height
(most inline
elements are not explicitly resizable). If you set them to display: block;
the gap goes away. You can also set vertical-align: top;
to achieve the same result.
演示: 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;
}
输出:
这篇关于HTML5中的canvas / video / audio元素下方有一个4像素的空隙的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!