Istnieje luka 4px poniżej płótno/wideo/audio w elementy HTML5

Przy użyciu HTML5, jeśli umieścisz element canvas/video/audio/svg w div, nie będzie 4px luka poniżej tych elementów. Testowałem poniższy kod w prawie wszystkich przeglądarkach obsługujących HTML5, niestety wszystkie mają ten sam problem.Istnieje luka 4px poniżej płótno/wideo/audio w elementy 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>

Źródło

2011-12-22 user994778

To dlatego, że są wbudowane elementy z resizable height (większość inline elementów nie są wyraźnie zmienny rozmiar). Jeśli ustawisz je na display: block;, luka zniknie. Możesz także ustawić vertical-align: top;, aby osiągnąć ten sam rezultat.

Demo: 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; 
}

wyjściowa:

enter image description here

Źródło

2011-12-22 07:44:00 ThinkingStiff

Dziękuję bardzo! Ale jeśli ustawione na {display: inline-block}, przerwa pojawia się ponownie. Dlaczego zachowanie tych elementów różni się od innych wbudowanych elementów? – user994778

'img' działa w ten sam sposób. To elementy 'inline', które mają zmienną wysokość' height'. 'vertical-align: top;' naprawia problem, jeśli chcesz zachować element 'inline'. – ThinkingStiff

{vertical-align: top;} To jest naprawdę to, czego chcę! Jesteś taki świetny! – user994778

Margin -5px działa w Firefoksie.

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

Źródło

2011-12-22 07:16:59 Teg

Dziękuję za odpowiedź. Zastanawiam się tylko, dlaczego wszystkie przeglądarki mają podobny problem? Nie mogę znaleźć żadnych domyślnych stylów na ten temat. – user994778

Przyznaję, że nie wiem .. – Teg

Pamiętaj, że w tym przypadku jest to 5 pikseli, ponieważ ustawiłeś ramkę o grubości 1 piksela, więc jeśli usuniesz ramkę, będzie to tylko 4 piksele. W każdym razie, to rozwiązanie wydaje się być brudne, lubię vertical-align: top; - metoda w zaakceptowanej odpowiedzi więcej :). –

Istnieje luka 4px poniżej płótno/wideo/audio w elementy HTML5

Odpowiedz

Powiązane problemy