Safari和Firefox中CSS背景的位置不同

Question

我設計了一個由4個部分組成的網站首頁。 頂部，中間1，中間2和底部。 每個部分的最小高度均為網絡瀏覽器的100％。 頂部具有透明背景色和圖像/視頻背景。

當用戶向下滾動時，＃video節應留在每個節的后面，而在Safari中，它不會將視頻節保留在其他節的后面，並且Firefox不會顯示視頻節。 使用鉻，一切都很好。

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%;
}

Answer 1

首先，最好將視頻放到最后，這樣可以改善頁面的加載。

為了使視頻保持在其余位置，請使用z-index: -1; 在#videosection 。

Safari和Firefox中CSS背景的位置不同

問題描述

1 個解決方案

解決方案1
0 2014-02-21 17:55:56

Safari和Firefox中CSS背景的位置不同

問題描述

1 個解決方案

解決方案1 0 2014-02-21 17:55:56

解決方案1
0 2014-02-21 17:55:56