1. 首頁
  2. 問答
  3. 網站div在Firefox中無法正常顯示

網站div在Firefox中無法正常顯示

2017-08-28 65 views
0

我正在使用網站（網站here）。該分類分類01​​及其所有內容在Firefox中無法正常顯示。他們在那裏，但不可見。我試過設置display: table;，這使內容應該佔據可見空間，但內容本身仍然無法正確顯示。我也試圖用overflow搞亂，無濟於事。網站div在Firefox中無法正常顯示

此外，我已確認它適用於OS X上的Safari和Chrome，Android上的Chrome，iOS上的Chrome和Safari以及Windows上的Internet Explorer。但是，在Windows上，Microsoft Edge與Firefox有相同的顯示問題。

.index_header { 
 
     overflow-x: auto; 
 
     max-width: 100%; 
 
     -webkit-overflow-scrolling: touch; 
 
     -ms-overflow-stype: -ms-autohiding-scrollbar; 
 
     position: relative; } 
 
     @media screen and (max-width: 39.9375em) { 
 
     .index_header { 
 
      background-image: url("../img/header/banner_small.jpg"); 
 
      background-size: 100% 100%; 
 
      height: 100%; 
 
      padding-top: 100%; 
 
      background-attachment: scroll; 
 
      background-position: left; } } 
 
     @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
     .index_header { 
 
      background-image: url("../img/header/banner_medium.jpg"); 
 
      background-size: 100% 100%; 
 
      height: 100%; 
 
      padding-top: 42.93333%; 
 
      background-attachment: scroll; 
 
      background-position: left; } } 
 
     @media print, screen and (min-width: 64em) { 
 
     .index_header { 
 
      background-image: url("../img/header/banner_large.jpg"); 
 
      background-size: 100% 100%; 
 
      height: 100%; 
 
      padding-top: 34.00204%; 
 
      background-attachment: scroll; 
 
      background-position: left; } } 
 
     .index_header .index_headshot { 
 
     z-index: 2; 
 
     border-radius: 100%; } 
 
     @media screen and (max-width: 39.9375em) { 
 
      .index_header .index_headshot { 
 
      position: absolute; 
 
      top: 50%; 
 
      left: 50%; 
 
      -webkit-transform: translate(-50%, -50%); 
 
       -ms-transform: translate(-50%, -50%); 
 
        transform: translate(-50%, -50%); } } 
 
     @media print, screen and (min-width: 40em) { 
 
      .index_header .index_headshot { 
 
      position: absolute; 
 
      top: 50%; 
 
      -webkit-transform: translateY(-50%); 
 
       -ms-transform: translateY(-50%); 
 
        transform: translateY(-50%); } } 
 
     @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
      .index_header .index_headshot { 
 
      margin-left: 6.2%; } } 
 
     @media print, screen and (min-width: 64em) { 
 
      .index_header .index_headshot { 
 
      margin-left: 4.89629%; } } 
 
     .index_header .index_headshot img { 
 
      position: absolute; 
 
      top: 50%; 
 
      left: 50%; 
 
      -webkit-transform: translate(-50%, -50%); 
 
       -ms-transform: translate(-50%, -50%); 
 
        transform: translate(-50%, -50%); 
 
      z-index: 2; } 
 
     @media screen and (max-width: 39.9375em) { 
 
      .index_header .index_headshot { 
 
      height: 78.125%; 
 
      width: 78.125%; } 
 
      .index_header .index_headshot img { 
 
       height: 79.375%; } } 
 
     @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
      .index_header .index_headshot { 
 
      height: 77.63975%; 
 
      width: 33.33333%; } 
 
      .index_header .index_headshot img { 
 
       height: 77.63975%; } } 
 
     @media print, screen and (min-width: 64em) { 
 
      .index_header .index_headshot { 
 
      height: 77.8%; 
 
      width: 26.45359%; } 
 
      .index_header .index_headshot img { 
 
       height: 77.8%; } } 
 
     @media screen and (max-width: 39.9375em) { 
 
     .index_header:before { 
 
      background-color: rgba(36, 47, 49, 0.4); 
 
      position: absolute !important; 
 
      top: 0rem !important; 
 
      right: 0rem !important; 
 
      bottom: 0rem !important; 
 
      left: 0rem !important; 
 
      content: ''; 
 
      width: auto; 
 
      height: 100%; } } 
 
     @media print, screen and (min-width: 40em) { 
 
     .index_header:before { 
 
      background: linear-gradient(to right, rgba(36, 47, 49, 0.4) 15%, rgba(36, 47, 49, 0)); 
 
      position: absolute !important; 
 
      top: 0rem !important; 
 
      right: 0rem !important; 
 
      bottom: 0rem !important; 
 
      left: 0rem !important; 
 
      content: ''; 
 
      width: auto; 
 
      height: 100%; } } 
 
     .index_header .index_header_content { 
 
     position: relative; } 
 
     @media screen and (max-width: 39.9375em) { 
 
      .index_header .index_header_content { 
 
      margin-top: -100%; } } 
 
     @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
      .index_header .index_header_content { 
 
      margin-top: -42.93333%; } 
 
      .index_header .index_header_content h1 { 
 
       margin-top: 5%; 
 
       font-size: 56px; 
 
       color: #111617; 
 
       opacity: .7; } } 
 
     @media print, screen and (min-width: 64em) { 
 
      .index_header .index_header_content { 
 
      margin-top: -34.00204%; } 
 
      .index_header .index_header_content h1 { 
 
       margin-top: 3%; 
 
       font-size: 72px; 
 
       color: #111617; 
 
       opacity: .7; } } 
 
     .index_header .index_header_content .index_name { 
 
      text-align: center; 
 
      width: 100%; 
 
      background-color: rgba(71, 106, 105, 0.9); 
 
      position: absolute; 
 
      top: 50%; 
 
      left: 50%; 
 
      -webkit-transform: translate(-50%, -50%); 
 
       -ms-transform: translate(-50%, -50%); 
 
        transform: translate(-50%, -50%); 
 
      -webkit-flex: 0 0 auto; 
 
       -ms-flex: 0 0 auto; 
 
        flex: 0 0 auto; 
 
      min-height: 0px; 
 
      min-width: 0px; 
 
      width: calc(100% - 1.875rem); 
 
      margin-right: 0.9375rem; 
 
      margin-left: 0.9375rem; 
 
      z-index: 1; } 
 
      .index_header .index_header_content .index_name:after { 
 
      position: absolute !important; 
 
      top: 0rem !important; 
 
      right: 0rem !important; 
 
      bottom: 0rem !important; 
 
      left: 0rem !important; 
 
      content: ''; 
 
      width: auto; 
 
      height: 100%; 
 
      background: url(../img/header/nav2.png); 
 
      background-repeat: repeat-x; 
 
      margin-left: -12%; 
 
      z-index: -1; 
 
      opacity: .3; } 
 
      @media screen and (max-width: 39.9375em) { 
 
      .index_header .index_header_content .index_name { 
 
       display: none; } } 
 
      @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
      .index_header .index_header_content .index_name { 
 
       margin-top: 21.46667%; 
 
       padding-left: 35%; } } 
 
      @media print, screen and (min-width: 64em) { 
 
      .index_header .index_header_content .index_name { 
 
       margin-top: 17.00102%; 
 
       padding-left: 20%; } }
<!doctype html> 
 
<html class="no-js" lang="en"> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Josh Guberman</title> 
 
    <link rel="stylesheet" href="assets/css/app.css"> 
 
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png"> 
 
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png"> 
 
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png"> 
 
    <link rel="manifest" href="assets/img/favicon/manifest.json"> 
 
    <link rel="mask-icon" href="assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5"> 
 
    <link rel="shortcut icon" href=".assetsimg/favicon/favicon.ico"> 
 
    <meta name="msapplication-config" content="assets/img/favicon/browserconfig.xml"> 
 
<meta name="theme-color" content="#ffffff"> 
 

 
    </head> 
 
    <body> 
 

 
    <div class="top-bar" id="big"> 
 
    \t <div class="top-bar-left"> 
 
    \t <!-- 
 
    \t \t <ul class="menu"> 
 
    \t \t \t <li class="menu-text">Josh Guberman</li> 
 
    \t \t </ul> 
 
    \t --> 
 
    \t </div> 
 
    \t <div class="top-bar-right"> 
 
    \t \t <ul class="menu"> 
 
    \t \t \t <li><a href="#">About Me</a></li> 
 
    \t \t \t <li><a href="#">CV</a></li> 
 
    \t \t \t <li><a href="#">Projects</a></li> 
 
    \t \t \t <li><a href="#">Artwork</a></li> 
 
    \t \t \t <li><a href="#">Blog</a></li> 
 
    \t \t </ul> 
 
    \t </div> 
 
    </div><div class="top-bar" id="small"> 
 
    \t <div class="menu"> 
 
    \t \t <div class="menu-text">Josh Guberman</div> 
 
    \t </div> 
 
    </div> 
 
    <div class="index_header"> 
 
    \t <div class="index_headshot"> 
 
    \t \t <img src="assets/img/header/headshot.svg" alt="headshot of Josh Guberman"> 
 
    \t </div><!-- index_headshot --> 
 
    \t <div class="index_header_content"> 
 
    \t \t <div class="index_name"> 
 
    \t \t <h1>Josh Guberman</h1> 
 
    \t \t </div><!-- index_name --> 
 
    \t </div> <!-- index_header_content --> 
 
    </div> <!-- index_header_container --><div class="about-me"> 
 
    \t <div class="spacer"></div> 
 
    \t <div class="top-heading"><h2>About Me</h2></div> 
 
    \t <div class="spacer"></div> 
 
    \t <div class="about-content"> 
 
    \t \t <p>Some words are written here</p> 
 
    \t </div> 
 
    </div> 
 

 
    <div class="footer-container"> 
 
    \t <div class="footer-wrapper"> 
 
    \t \t <div class="footer"> 
 
    \t \t \t <p>&copy;Josh Guberman 2017</p> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 

 
    <script src="assets/js/app.js"></script> 
 
    <script>$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { 
 
    // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint 
 
});</script> 
 
    </body> 
 
</html>

來源

2017-08-28 jguberman

回答

0 

.index_header { 
 
    overflow-x: auto; 
 
    max-width: 100%; 
 
    -webkit-overflow-scrolling: touch; 
 
    -ms-overflow-stype: -ms-autohiding-scrollbar; 
 
    position: relative; } 
 
    @media screen and (max-width: 39.9375em) { 
 
    .index_header { 
 
     background-image: url("../img/header/banner_small.jpg"); 
 
     background-size: 100% 100%; 
 
     height: 100%; 
 
     padding-top: 100%; 
 
     background-attachment: scroll; 
 
     background-position: left; } } 
 
    @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
    .index_header { 
 
     background-image: url("../img/header/banner_medium.jpg"); 
 
     background-size: 100% 100%; 
 
     height: 100%; 
 
     padding-top: 42.93333%; 
 
     background-attachment: scroll; 
 
     background-position: left; } } 
 
    @media print, screen and (min-width: 64em) { 
 
    .index_header { 
 
     background-image: url("../img/header/banner_large.jpg"); 
 
     background-size: 100% 100%; 
 
     height: 100%; 
 
     padding-top: 34.00204%; 
 
     background-attachment: scroll; 
 
     background-position: left; } } 
 
    .index_header .index_headshot { 
 
    z-index: 2; 
 
    border-radius: 100%; } 
 
    @media screen and (max-width: 39.9375em) { 
 
     .index_header .index_headshot { 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     -webkit-transform: translate(-50%, -50%); 
 
      -ms-transform: translate(-50%, -50%); 
 
       transform: translate(-50%, -50%); } } 
 
    @media print, screen and (min-width: 40em) { 
 
     .index_header .index_headshot { 
 
     position: absolute; 
 
     top: 50%; 
 
     -webkit-transform: translateY(-50%); 
 
      -ms-transform: translateY(-50%); 
 
       transform: translateY(-50%); } } 
 
    @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
     .index_header .index_headshot { 
 
     margin-left: 6.2%; } } 
 
    @media print, screen and (min-width: 64em) { 
 
     .index_header .index_headshot { 
 
     margin-left: 4.89629%; } } 
 
    .index_header .index_headshot img { 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     -webkit-transform: translate(-50%, -50%); 
 
      -ms-transform: translate(-50%, -50%); 
 
       transform: translate(-50%, -50%); 
 
     z-index: 2; } 
 
    @media screen and (max-width: 39.9375em) { 
 
     .index_header .index_headshot { 
 
     height: 78.125%; 
 
     width: 78.125%; } 
 
     .index_header .index_headshot img { 
 
      height: 79.375%; } } 
 
    @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
     .index_header .index_headshot { 
 
     height: 77.63975%; 
 
     width: 33.33333%; } 
 
     .index_header .index_headshot img { 
 
      height: 77.63975%; } } 
 
    @media print, screen and (min-width: 64em) { 
 
     .index_header .index_headshot { 
 
     height: 77.8%; 
 
     width: 26.45359%; } 
 
     .index_header .index_headshot img { 
 
      height: 77.8%; } } 
 
    @media screen and (max-width: 39.9375em) { 
 
    .index_header:before { 
 
     background-color: rgba(36, 47, 49, 0.4); 
 
     position: absolute !important; 
 
     top: 0rem !important; 
 
     right: 0rem !important; 
 
     bottom: 0rem !important; 
 
     left: 0rem !important; 
 
     content: ''; 
 
     width: auto; 
 
     height: 100%; } } 
 
    @media print, screen and (min-width: 40em) { 
 
    .index_header:before { 
 
     background: linear-gradient(to right, rgba(36, 47, 49, 0.4) 15%, rgba(36, 47, 49, 0)); 
 
     position: absolute !important; 
 
     top: 0rem !important; 
 
     right: 0rem !important; 
 
     bottom: 0rem !important; 
 
     left: 0rem !important; 
 
     content: ''; 
 
     width: auto; 
 
     height: 100%; } } 
 
    .index_header .index_header_content { 
 
    position: relative; } 
 
    @media screen and (max-width: 39.9375em) { 
 
     .index_header .index_header_content { 
 
     margin-top: -100%; } } 
 
    @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
     .index_header .index_header_content { 
 
     margin-top: -42.93333%; } 
 
     .index_header .index_header_content h1 { 
 
      margin-top: 5%; 
 
      font-size: 56px; 
 
      color: #111617; 
 
      opacity: .7; } } 
 
    @media print, screen and (min-width: 64em) { 
 
     .index_header .index_header_content { 
 
     margin-top: -34.00204%; } 
 
     .index_header .index_header_content h1 { 
 
      margin-top: 3%; 
 
      font-size: 72px; 
 
      color: #111617; 
 
      opacity: .7; } } 
 
    .index_header .index_header_content .index_name { 
 
     text-align: center; 
 
     width: 100%; 
 
     background-color: rgba(71, 106, 105, 0.9); 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     -webkit-transform: translate(-50%, -50%); 
 
      -ms-transform: translate(-50%, -50%); 
 
       transform: translate(-50%, -50%); 
 
     -webkit-flex: 0 0 auto; 
 
      -ms-flex: 0 0 auto; 
 
       flex: 0 0 auto; 
 
     min-height: 0px; 
 
     min-width: 0px; 
 
     width: calc(100% - 1.875rem); 
 
     margin-right: 0.9375rem; 
 
     margin-left: 0.9375rem; 
 
     z-index: 1; } 
 
     .index_header .index_header_content .index_name:after { 
 
     position: absolute !important; 
 
     top: 0rem !important; 
 
     right: 0rem !important; 
 
     bottom: 0rem !important; 
 
     left: 0rem !important; 
 
     content: ''; 
 
     width: auto; 
 
     height: 100%; 
 
     background: url(../img/header/nav2.png); 
 
     background-repeat: repeat-x; 
 
     margin-left: -12%; 
 
     z-index: -1; 
 
     opacity: .3; } 
 
     @media screen and (max-width: 39.9375em) { 
 
     .index_header .index_header_content .index_name { 
 
      display: none; } } 
 
     @media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
     .index_header .index_header_content .index_name { 
 
      margin-top: 21.46667%; 
 
      padding-left: 35%; } } 
 
     @media print, screen and (min-width: 64em) { 
 
     .index_header .index_header_content .index_name { 
 
      margin-top: 17.00102%; 
 
      padding-left: 20%; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html class="no-js" lang="en"> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Josh Guberman</title> 
 
    <link rel="stylesheet" href="assets/css/app.css"> 
 
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png"> 
 
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png"> 
 
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png"> 
 
    <link rel="manifest" href="assets/img/favicon/manifest.json"> 
 
    <link rel="mask-icon" href="assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5"> 
 
    <link rel="shortcut icon" href=".assetsimg/favicon/favicon.ico"> 
 
    <meta name="msapplication-config" content="assets/img/favicon/browserconfig.xml"> 
 
<meta name="theme-color" content="#ffffff"> 
 

 
    </head> 
 
    <body> 
 

 
    <div class="top-bar" id="big"> 
 
    \t <div class="top-bar-left"> 
 
    \t <!-- 
 
    \t \t <ul class="menu"> 
 
    \t \t \t <li class="menu-text">Josh Guberman</li> 
 
    \t \t </ul> 
 
    \t --> 
 
    \t </div> 
 
    \t <div class="top-bar-right"> 
 
    \t \t <ul class="menu"> 
 
    \t \t \t <li><a href="#">About Me</a></li> 
 
    \t \t \t <li><a href="#">CV</a></li> 
 
    \t \t \t <li><a href="#">Projects</a></li> 
 
    \t \t \t <li><a href="#">Artwork</a></li> 
 
    \t \t \t <li><a href="#">Blog</a></li> 
 
    \t \t </ul> 
 
    \t </div> 
 
    </div><div class="top-bar" id="small"> 
 
    \t <div class="menu"> 
 
    \t \t <div class="menu-text">Josh Guberman</div> 
 
    \t </div> 
 
    </div> 
 
    <div class="index_header"> 
 
    \t <div class="index_headshot"> 
 
    \t \t <img src="assets/img/header/headshot.svg" alt="headshot of Josh Guberman"> 
 
    \t </div><!-- index_headshot --> 
 
    \t <div class="index_header_content"> 
 
    \t \t <div class="index_name"> 
 
    \t \t <h1>Josh Guberman</h1> 
 
    \t \t </div><!-- index_name --> 
 
    \t </div> <!-- index_header_content --> 
 
    </div> <!-- index_header_container --><div class="about-me"> 
 
    \t <div class="spacer"></div> 
 
    \t <div class="top-heading"><h2>About Me</h2></div> 
 
    \t <div class="spacer"></div> 
 
    \t <div class="about-content"> 
 
    \t \t <p>Some words are written here</p> 
 
    \t </div> 
 
    </div> 
 

 
    <div class="footer-container"> 
 
    \t <div class="footer-wrapper"> 
 
    \t \t <div class="footer"> 
 
    \t \t \t <p>&copy;Josh Guberman 2017</p> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 

 
    <script src="assets/js/app.js"></script> 
 
    <script>$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { 
 
    // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint 
 
});</script> 
 
    </body> 
 
</html>

來源

2017-08-28 02:12:48

+0

這是幹什麼的？它如何解決他的問題？解釋你在做什麼！ https://stackoverflow.com/help/how-to-answer – Rob

+0

我沒有看到你的CSS和我的任何區別。替代我的CSS，問題依然存在於您提供的代碼中。謝謝，不過。你介意提供一些關於帖子的更多信息嗎？ – jguberman

+0

我認爲需要jquery link.Try連接jquery鏈接。 –

2

所以我本來很關閉。我認爲問題在於firefox是默認給你的頭部0px的高度。在控制檯上進行更改，您可以看到我可以通過對您的標題進行小小調整來查看CSS。 Here是imgur鏈接。

來源

2017-08-28 02:14:55

+0

但它適用於Chrome。那麼爲什麼他應該改變自己的問題以及如何解決他的問題並回答問題呢？ https://stackoverflow.com/help/how-to-answer – Rob

+0

我建立了基金會（foundation.zurb.com）的網站。這些最小寬度是各種屏幕尺寸的斷點，它們實質上決定了有效的「網格」尺寸。這些斷點工作得很好（注意Firefox上的元素對移動/小，中，大視口大小的反應是不同的）。更改這些最小寬度只會更改網格大小更改的視口寬度。不過謝謝！ – jguberman

+0

是的，謝謝！這看起來有訣竅 - 明確指出高度使得丟失的內容可見。不幸的是，這引發了一個新問題。在任何給定的視口大小下，.index_header div的高度需要等於背景圖像的高度（否則，圖像和內容會變大）。有什麼辦法可以做到這一點？我寧願不添加背景圖像與HTML而不是CSS，但我認爲這將工作，如果絕對必要的。 – jguberman

相關問題

 相關問題