HTML5 透明 div 高度与带有视频或 iframe 标记的容器高度重叠答案

【问题标题】：HTML5 transparent div height overlaps container height with video or iframe tagHTML5 透明 div 高度与带有视频或 iframe 标记的容器高度重叠
【发布时间】：2014-08-22 09:45:12
【问题描述】：

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

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

http://jsfiddle.net/v3vLq0nv/

图像标签不会发生这种情况，请注意，在此示例中，我使用了嵌入式 youtube iframe，因为它与标签存在相同的问题。

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

我发现唯一有效的方法实际上是更改 HTML5 声明：

<!DOCTYPE html>

到

<!DOCTYPE>

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

注意在 jsfiddle 中执行此操作不会使其工作，因为 jsfiddle 本身会将声明放回框架“！DOCTYPE html”

【问题讨论】：

标签： css html video

【解决方案1】：

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

#videoContainer { height:150px; }

或

#videoContainer iframe { float:left; }

它们都会解决您的问题。

【讨论】：

太棒了，我不敢相信 float:left 有效，如此简单！我无法设置容器的高度，否则视频将不再是全宽，谢谢！

【解决方案2】：

将display:block; 添加到 iframe :)

【讨论】：

太棒了，这也有效，我没有视频和 iframe 标签不被阻止！