suchen

Heim  >  Fragen und Antworten  >  Hauptteil

css - 为什么video不能填满整个父级div？底部有黑边？

代码如下：

<!DOCTYPE html>  
<html>  
<head>  
<title>Demo</title>  
<style>
.videoContainer {
    width: 70%;
    height: auto;
    background: #000;
}
</style>
</head>  
  
<body>   
<p 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>
</p>
</body>  
</html>

最终的显示效果：

我的疑惑是：为什么父元素p会比video高出几个像素，从而导致底部有黑边？

PHP中文网PHP中文网2781 Tage vor860

Antworte allen(3)Ich werde antworten

  • PHPz

    PHPz2017-04-17 15:00:35

    补充下，貌似这个黑边是因为父元素样式里有了background属性，具体来说是background-color这个属性，至于成因是什么，实话讲我也不知道……

    目前猜测原因可能是和video默认的display是inline有关系。

    所以解决方案应该是：

    1. 加上font-size: 0;；

    2. 去掉background/background-color属性；

    3. 给<video>加上display: block;样式。

    Antwort
    0
  • 阿神

    阿神2017-04-17 15:00:35

    因为你的父元素videoContainer没有高度，当<video>使用了contorl属性的时候，就会出现一个黑边。
    **解决方法：
    1、删掉contorl属性
    2、给父元素高度，或者用padding撑开等**

    Antwort
    0
  • 阿神

    阿神2017-04-17 15:00:35

    其实这是一个html的bug，父级的font size设为0就正常了。。

    Antwort
    0
  • StornierenAntwort