Safari 上的响应式视频横幅顶部和底部有巨大的差距答案

【问题标题】：Responsive video banner on Safari has huge gaps top and bottomSafari 上的响应式视频横幅顶部和底部有巨大的差距
【发布时间】：2016-01-21 02:54:18
【问题描述】：

我正在尝试使用 html5 标签在网站上实现一个非常简单的视频作为横幅。我只需要它是全宽和响应式的，这似乎在 Chrome 和 Firefox 中完美运行，但在 Safari 中却不行。

这是一个简化版本，取自更复杂的 wordpress 页面，使用完全相同的标记，并且发生了同样的情况。 http://noisilyfestival.com/video-test.html

我已将视频背景设置为红色，在 Safari 中看到顶部和底部有巨大的间隙，而在 Firefox 和 Chrome 中它是齐平的。

我一辈子都想不通这里发生了什么！我已将视频设置为 display:block，它修复了底部的几个像素间隙，但无法解决此问题。提前致谢！

【问题讨论】：

【解决方案1】：

我删除了 display:block;来自#homepage-video 和 Safari 看起来还不错。

【讨论】：

这对我不起作用！这是在我的本地机器上，带有 display:block;从#homepage-video 中删除。 prntscr.com/9qyxl0 向下滚动时，视频下方也有相同高度的间隙。设置高度可以消除这些差距，但显然这不是响应式的！
Macbook 上的 Safari 版本 8.0.2
将 display:block 从#homepage-video 中移除，然后重新上传，以便我查看代码。如果我检查那个元素，然后关闭 display:block，一切都会按原样卡入到位。

【解决方案2】：

有人向我指出，在调整浏览器宽度时，问题会自行纠正。因此，内在比率技术是确保跨浏览器工作的最有效方法...... http://alistapart.com/article/creating-intrinsic-ratios-for-video

在我测试过的所有浏览器上都能正常工作。

【讨论】：