【问题标题】: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,它修复了底部的几个像素间隙,但无法解决此问题。提前致谢!

【问题讨论】:

标签: html html5-video


【解决方案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

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

【讨论】:

    猜你喜欢
    • 2013-03-11
    • 2018-05-25
    • 2021-04-21
    • 2022-12-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多