【发布时间】：2017-08-28 10:33:34
【问题描述】：
我正在开发一个网站（网站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>©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>【问题讨论】：