Existe una brecha 4 píxeles por debajo de los elementos de audio de lona/vídeo/HTML5 en

Al usar HTML 5, si se coloca un elemento de canvas/video/audio/svg en un div, habrá una brecha 4px por debajo de estos elementos. Probé el código siguiente en casi todos los navegadores compatibles con HTML5, lamentablemente todos tienen el mismo problema.Existe una brecha 4 píxeles por debajo de los elementos de audio de lona/vídeo/HTML5 en

<!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>

Fuente

2011-12-22 user994778

Es debido a que son elementos en línea con la mayoría de tamaño variable (heightinline elementos no están explícitamente tamaño variable). Si los configura en display: block;, la brecha desaparece. También puede establecer vertical-align: top; para lograr el mismo resultado.

Demostración: 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; 
}

Salida:

enter image description here

Fuente

2011-12-22 07:44:00 ThinkingStiff

¡Muchas gracias! Pero si se establece en {display: inline-block}, la brecha aparece nuevamente. ¿Por qué el comportamiento de estos elementos es diferente a otros elementos en línea? – user994778

'img' funciona de la misma manera. Son elementos 'en línea' que tienen 'altura 'de tamaño variable. 'vertical-align: top;' soluciona el problema si desea mantener el elemento 'inline'. – ThinkingStiff

{vertical-align: top;} ¡Esto es realmente lo que quiero! ¡Eres genial! – user994778

Margen -5px está trabajando en 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>

Fuente

2011-12-22 07:16:59 Teg

Gracias por su respuesta. Me pregunto por qué todos los navegadores tienen el mismo problema. No puedo encontrar ningún estilo predeterminado sobre eso. – user994778

Admito que no sé ... – Teg

Tenga en cuenta que en este caso es 5px porque ha configurado un borde con un grosor de 1px, por lo que si quita el borde, es solo 4px. De todos modos, esa solución parece estar un poco sucia, me gusta el vertical-align: top; - método en la respuesta aceptada más :). –

Existe una brecha 4 píxeles por debajo de los elementos de audio de lona/vídeo/HTML5 en

Respuesta

Cuestiones relacionadas