css - 为什么video不能填满整个父级div?底部有黑边?
问题描述
代码如下:
<!DOCTYPE html> <html> <head> <title>Demo</title> <style>.videoContainer { width: 70%; height: auto; background: #000;}</style></head> <body> <p > <video controls preload='auto' > <source src='https://www.haobala.com/wenda/test.mp4' type='video/mp4' /> <p>Your browser does not support the video tag.</p> </video></p></body> </html>
最终的显示效果:
我的疑惑是:为什么父元素p会比video高出几个像素,从而导致底部有黑边?
问题解答
回答1:补充下,貌似这个黑边是因为父元素样式里有了background属性,具体来说是background-color这个属性,至于成因是什么,实话讲我也不知道……
目前猜测原因可能是和video默认的display是inline有关系。
所以解决方案应该是:
加上font-size: 0;;
去掉background/background-color属性;
给<video>加上display: block;样式。
回答2:因为你的父元素videoContainer没有高度,当<video>使用了contorl属性的时候,就会出现一个黑边。**解决方法:1、删掉contorl属性 2、给父元素高度,或者用padding撑开等**
回答3:其实这是一个html的bug,父级的font size设为0就正常了。。
相关文章:
1. javascript - H5下拉能更换页面么 怎么实现 在左右滑的页面中2. angular.js - angularJS最简单方法实现点击checkbox,button变亮3. java - 当系统出现线程死锁时怎么处理?4. vue计算属性怎么样与for结合使用5. angular.js - 前端使用input使用ng-model绑定数据,控制前中一直无法得到映射的值6. angular.js - 关于指令link 中的创建变量问题7. javascript - 请问微信jssdk自定义分享是不是不能用了?8. javascript - .vue页面跳转问题9. javascript - setTimeout第一个参数是立即执行函数,看不懂了10. css - chrome和safari ul li表现布局不一致问题