网站div在Firefox中无法正常显示

我正在使用网站（网站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

.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

这是干什么的？它如何解决他的问题？解释你在做什么！ https://stackoverflow.com/help/how-to-answer – Rob

我没有看到你的CSS和我的任何区别。替代我的CSS，问题依然存在于您提供的代码中。谢谢，不过。你介意提供一些关于帖子的更多信息吗？ – jguberman

我认为需要jquery link.Try连接jquery链接。 –

所以我本来很关闭。我认为问题在于firefox是默认给你的头部0px的高度。在控制台上进行更改，您可以看到我可以通过对您的标题进行小小调整来查看CSS。 Here是imgur链接。

来源

2017-08-28 02:14:55

但它适用于Chrome。那么为什么他应该改变自己的问题以及如何解决他的问题并回答问题呢？ https://stackoverflow.com/help/how-to-answer – Rob

我建立了基金会（foundation.zurb.com）的网站。这些最小宽度是各种屏幕尺寸的断点，它们实质上决定了有效的“网格”尺寸。这些断点工作得很好（注意Firefox上的元素对移动/小，中，大视口大小的反应是不同的）。更改这些最小宽度只会更改网格大小更改的视口宽度。不过谢谢！ – jguberman

是的，谢谢！这看起来有诀窍 - 明确指出高度使得丢失的内容可见。不幸的是，这引发了一个新问题。在任何给定的视口大小下，.index_header div的高度需要等于背景图像的高度（否则，图像和内容会变大）。有什么办法可以做到这一点？我宁愿不添加背景图像与HTML而不是CSS，但我认为这将工作，如果绝对必要的。 – jguberman

网站div在Firefox中无法正常显示

回答

相关问题