html - CSS 背景定位在 safari 和 firefox 中不同-6ren

html - CSS 背景定位在 safari 和 firefox 中不同

转载作者：行者123 更新时间：2023-11-28 11:35:41

24

4

我设计了一个由 4 个部分组成的网站主页。顶部、中部 1、中部 2 和底部。每个部分的最小高度为网络浏览器的 100%。顶部有一个带有图像/视频背景的透明背景颜色。

当用户向下滚动时，#videosection 应保留在每个部分的后面，而在 Safari 中，它不会将视频部分保留在其他部分的后面，而 firefox 不会显示视频部分。使用 chrome 一切都很好。

HTML:

<body>
 <div id="videosection"><video src=""id="bg-video" muted autoplay loop ></video></div>
  <div class="top-section">
  </div> 
  <div class="mid1-section">
        <div id="center-box">
          <section></section>  
        </div> 
  <div class="mid2-section">
    <div class="textbanner"><h3>Design</h3></div>
    <div class="devices box"><img src=""></div>
  </div>
  <div class="bottom-section">
     <div id="registerform"></div>
  </div>
</body>

这是 CSS:

  html, body{
  background-color: #ECF0F1;
  min-height:100%;
  margin: 0;
  padding: 0;
  }

    #videosection {
    position: fixed; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%
    z-index: 1;
    }

    videosection video {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 60%; 
    min-height: 50%; }

    .top-section{

    background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82) ); /* For Safari / background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / For Opera 11.1 to 12.0 / background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / For Firefox 3.6 to 15 / background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / Standard syntax */ background-repeat: repeat; 
    position: relative;
    top: 0; 
    left: 0;
    min-width: 100%;
    min-height: 100%; 
    z-index: 15;}


#center-column {
position: relative;
margin: 0;
margin-top: 10%;
margin-bottom: 5em;
padding: 0;
}

.mid1-section{
  min-height:100%;
  width: 100%;
  background-color: #ff5b68;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
    z-index: 15;}

#center-box { 
    overflow: hidden;
    float: none;
    text-align: center;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;}

.mid2-section{
  min-height:100%;
  width: 100%;
  background-color: #3499dc;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
    z-index: 15;}

 .textbanner { 
     overflow: hidden;
     float: none;
     height: 20%;
     width: 100%;
     margin: 0;
     padding-top: 3em;
 }

section { 
    overflow: hidden;
    text-align: center;
    margin: 0;
    float: left;
    background-color: #ff5b68;
    height: 10.5em;
    width: 40%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5em;
    padding-bottom: 0;
}

.bottom-section{
  min-height:100%;
  width: 100%;
  background-color: #1ABC9C;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
    z-index: 15;}

#registerform { 
    background-color: #16A085;
    border: 1px solid #16A085;
    border-radius: 5px;
    width: 420px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 5%;
}

最佳答案

首先，视频最好放在最后，这样可以提高页面的加载速度。

要使视频落后于其他视频，请在 #videosection 中使用 z-index: -1;。

关于html - CSS 背景定位在 safari 和 firefox 中不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20936748/

24

4

0

文章推荐： jquery - 使用 jQuery 在 #wrapper 中获取 div 或 img 元素

文章推荐： ios - 如何在同一类中使用警报和微调器？

文章推荐： html - 超链接表现异常

safari - Safari 和 Mobile Safari 是否会错误地渲染带有半径和填充的圆形边框？
Safari 和 Mobile Safari 在组合边框半径、填充和边框时似乎有问题。在 Chrome 和 Firefox 中运行良好。 CSS: img { width: 200px;
safari - Safari 开发工具中的断点自动启用
每次我在打开 Safari 开发工具的情况下加载页面(无论是哪个选项卡)时，都会触发一些断点，并且我会被重定向到“源代码”选项卡，并显示消息“调试器已暂停”。问题是我没有设置任何断点，至少是有意的，这
safari - Safari 中过渡期间的不透明度变化闪烁
我有一个复合 div(它有 translate3d)和一个 opacity过渡: #bad { background-color: red; -webkit-transition: o
safari - Safari 的阅读器功能如何工作？
我想为我正在制作的工具添加一个类似的功能。我对它在代码方面的工作方式很感兴趣。我希望能够获得一个 html 页面并排除除文章之外的所有内容。最佳答案 Readability 项目对 chrome 和
safari - Safari 中的跨源资源共享策略拒绝跨源重定向
我们有一个重定向到另一台服务器的 API 端点。它是通过 XHR 调用的，似乎在大多数浏览器中都能正常工作，除了 Safari(特别是在 iOS 上)。我在控制台中遇到的错误是:跨源重定向被跨源资源
safari - Safari 中的页面转换效果？
如何在 Safari 中为网页添加 IE 等页面转换效果？最佳答案你可以看看这个例子:http://sachiniscool.blogspot.com/2006/01/implementing-p
safari - 边界半径不适用于 safari
所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到，除了 safari，它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢？示例 http://jsfiddle.net/v
safari - safari 中导航的行高与其他浏览器不同
我找遍了这个问题的解决方案，但似乎没有任何效果，如果可以避免的话，我真的不想使用 hack。当我将 line-height 设置为垂直居中时，我的导航栏在任何地方都居中，但在 safari 中，它的
safari - 从输入中删除 Safari 联系人下拉列表
在输入字段中输入时，safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。我正在运行 Safari 版本 11.0.1 重现 fiddle : https
safari - 我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏
我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏。这听起来很容易，但事实并非如此! 我需要打开 safari，然后以全屏模式打开谷歌，然后隐藏工具栏。这将是以下示例的等效项，但对于
safari-extension - Safari 无法安装此扩展程序
嗨， friend 们，我开发了一个 safari 扩展并且也能够构建它。但是当我尝试安装它时，会出现以下错误: “Safari 无法安装此扩展程序。安装此扩展程序时出错” 我有一个有效的 Safa
safari - 从扩展代码本身读取 Safari 扩展版本
我想将使用的扩展版本报告给服务。有没有办法从扩展中读取扩展版本号？最佳答案您可以使用 displayVersion 访问该版本SafariExtension 的属性(property)类(cla
safari - 以编程方式更改 Safari 浏览器扩展的图标？
我有一个禁用模式的 Safari 浏览器扩展。我想做的是在用户进入禁用模式时以编程方式更改工具栏图标。是否有一个 API 可以让我实现这一点，如果有，它是什么？最佳答案您的扩展程序拥有的任何工具
safari - 如何关闭 Safari 的预取功能？
Safari 有一项“功能”，可以在您输入网址时预加载页面。现在对于大多数用户来说，这确实是一项功能，可以加快页面加载速度。但是对于 Web 开发人员来说，它可能会带来麻烦 - 特别是当它自动加载您
safari - 基本身份验证在 Safari 中不起作用
我们有一个正在开发中的 PHP Web 应用程序，它不应该被公众访问(但)，但我们不想实现自定义解决方案来防止这种情况发生，因此我们求助于 HTTP 基本身份验证，它通常工作正常但有是 iPhone
safari - 在 Safari 中查看本地存储中长值的内容
我正在尝试查看 Safari 本地存储中保存的单个值的全部内容(它是一个长 JSON 对象)。当我查看键/值对时，该值对于屏幕来说太长了，复制该行只会复制该值的可见部分。有没有办法看到整条线？最佳答
safari - 在 Safari 中禁用同源策略
出于开发目的，我需要在我的计算机上的 Safari(Windows 上)中禁用同源策略。在 Chrome 中，这可以通过使用标志 --disable-web-security 启动来完成。 Safa
safari - 如何使用 Safari 浏览器检查元素
我正在开发网站并创建应用程序。我想知道如何通过 safari 等网络浏览器检查元素。在普通的 Chrome、Firefox、Explorer 或任何其他浏览器中，我们将右键单击鼠标按钮或按功能键 F
safari - Safari Web 浏览器是开源项目吗？
我有兴趣针对 Safari 浏览器进行一些开发，但我不确定它是否是开源项目？我知道 webkit 是开源的，但这并不意味着浏览器是开源的。我已经给苹果发了电子邮件，但他们的回复不是很及时，所以我想知
safari - 为什么 Safari 无法连接到本地主机？
我有一个正确的/etc/hosts 文件，其中包含以下内容: 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 l

首页

博学

6Ren·AI

商城

html - CSS 背景定位在 safari 和 firefox 中不同