使用 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>
这是因为它们是可调整大小的内联元素height (most inline元素没有显式调整大小）。如果您将它们设置为display: block;差距消失了。您还可以设置vertical-align: top;达到同样的结果。
Demo: http://jsfiddle.net/ThinkingStiff/F2LAK/ 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;
}
Output:
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
