小贝子编程

网站 div 在火狐中无法正确显示



我正在开发一个网站(网站在这里(。div 分类.index_container及其所有内容在 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>

所以我最初很不对劲。我认为问题是火狐是默认的，给你的标题一个0px的高度。在控制台上对其进行一些更改，您可以看到我能够通过对标题的 CSS 进行小幅调整来查看它。这是伊姆古尔链接。

.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">
	<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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium