css - 为什么video不能填满整个父级div?底部有黑边?
本文介绍了css - 为什么video不能填满整个父级div?底部有黑边?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.videoContainer {
width: 70%;
height: auto;
background: #000;
}
</style>
</head>
<body>
<div class="videoContainer" >
<video id="myVideo" controls preload="auto" width="100%" height="100%" >
<source src="test.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
</div>
</body>
</html>
最终的显示效果:
我的疑惑是:为什么父元素div会比video高出几个像素,从而导致底部有黑边?
解决方案
补充下,貌似这个黑边是因为父元素样式里有了background
属性,具体来说是background-color
这个属性,至于成因是什么,实话讲我也不知道……
目前猜测原因可能是和video默认的display是inline有关系。
所以解决方案应该是:
加上
font-size: 0;
;去掉
background/background-color
属性;给
<video>
加上display: block;
样式。
这篇关于css - 为什么video不能填满整个父级div?底部有黑边?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文