html - 网站 div 在 Firefox 中无法正确显示

Question

我在网站上工作(网站 here)。分类为 .index_container 的 div 及其所有内容都无法在 Firefox 中正确显示。他们在那里，但不可见。我已经尝试设置display: table;，这使得内容应该占据的空间可见，但内容本身仍然没有正确显示。我也试过弄乱 overflow，但无济于事。

此外，我已经确认它适用于 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">
    	<div class="top-bar-left">
    	<!--
    		<ul class="menu">
    			<li class="menu-text">Josh Guberman</li>
    		</ul>
    	-->
    	</div>
    	<div class="top-bar-right">
    		<ul class="menu">
    			<li><a href="#">About Me</a></li>
    			<li><a href="#">CV</a></li>
    			<li><a href="#">Projects</a></li>
    			<li><a href="#">Artwork</a></li>
    			<li><a href="#">Blog</a></li>
    		</ul>
    	</div>
    </div><div class="top-bar" id="small">
    	<div class="menu">
    		<div class="menu-text">Josh Guberman</div>
    	</div>
    </div>
    <div class="index_header">
    	<div class="index_headshot">
    		<img src="assets/img/header/headshot.svg" alt="headshot of Josh Guberman">
    	</div><!-- index_headshot -->
    	<div class="index_header_content">
    		<div class="index_name">
    		<h1>Josh Guberman</h1>
    		</div><!-- index_name -->
    	</div> <!-- index_header_content -->
    </div> <!-- index_header_container --><div class="about-me">
    	<div class="spacer"></div>
    	<div class="top-heading"><h2>About Me</h2></div>
    	<div class="spacer"></div>
    	<div class="about-content">
    		<p>Some words are written here</p>
    	</div>
    </div>

    <div class="footer-container">
    	<div class="footer-wrapper">
    		<div class="footer">
    			<p>&copy;Josh Guberman 2017</p>
    		</div>
    	</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>

Answer 1

所以我本来就很不爽。我认为问题是 firefox 默认给你的标题高度为 0px。继续控制台并更改它一些你可以看到我能够通过对标题的 CSS 进行小的调整来看到它。 Here是 imgur 链接。