В HTML5 ниже элементов canvas / video / audio находится разрыв в 4px - PullRequest
Новая
       3

В HTML5 ниже элементов canvas / video / audio находится разрыв в 4px

26 голосов
/ 22 декабря 2011

При использовании 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>

Ответы [ 2 ]

55 голосов
/ 22 декабря 2011

Это потому, что они являются встроенными элементами с изменяемым размером 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

2 голосов
/ 22 декабря 2011

Margin -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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...