HTML5中的画布/视频/音频元素下方有4px的差距

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

解决方法

这是因为它们是具有可调整高度的内联元素(大多数内联元素不能显式调整大小)。如果将它们设置为显示：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;
}

输出：

HTML5中的画布/视频/音频元素下方有4px的差距

解决方法

相关文章