HTML5中的canvas/video/audio元素下方有4px的差距
use*_*778 27 html css html5 canvas
使用HTML5时,如果在canvas/中放置一个/ video/ audio/ svg元素div,则4px这些元素下方会有间隙.我在几乎所有支持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>
Thi*_*iff 57
这是因为它们是具有可调整大小的内联元素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;
}
输出:
- `img`以同样的方式工作.它是`inline`元素,具有可调整大小的`height`.`vertical-align:top;`修复问题,如果你想保持元素`inline`. (2认同)
对于任何想知道差距实际上是什么的人：
正如 ThinkingStiff 所提到的，这些是内联元素。这意味着默认情况下，他们将尝试将自己与文本的基线对齐。如果您有一些相邻的文本，则更容易看到正在发生的事情。
svg 下方剩余的空间量是当前字体大小下的降序器的大小。这就是为什么 Teg 的解决方案仅适用于默认字体大小的原因。默认字体大小为 16 像素，其中 4 像素专用于下行。如果你增加 font-size ，descender 也会增加。
使用默认 (16px)、50px 和 0px 的字体大小查看同一块 DOM；
div{
border: 1px solid blue;
}
canvas{
border: 1px solid red;
}
#two{
font-size:50px;
}
#three{
font-size:0px;
}<div id="one">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="two">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="three">
xy<canvas width="100" height="100"></canvas>
</div>