Question

我有一个容器，其中包含2个div，透明背景颜色位于视频标签的顶部，视频应为全屏宽度100％（高度无关紧要）

由于某种原因，透明div与视频容器的高度略微重叠（在底部），如下所示：

对于图片代码不会发生这种情况，请注意，此示例我使用了嵌入式youtube iframe，因为它与标记有同样的问题。

如果我在父容器上设置了一个高度，那么它工作正常，但为父容器设置一个固定的高度会使视频不再是全宽。

我发现唯一可行的方法实际上是改变HTML5声明：

<!DOCTYPE html>

到

<!DOCTYPE>

我猜这意味着HTML5不再是一个很好的解决方案。

注意在jsfiddle中执行此操作不会使其工作，因为jsfiddle本身会将声明放回框架中，并且＃34;！DOCTYPE html＆＃34;

Answer 1

我认为这里最好的两个选择是：

#videoContainer { height:150px; }

或

#videoContainer iframe { float:left; }

他们都会解决你的问题。

Answer 2

将display:block;添加到iframe：）