Flexbox无法在Chrome或Safari中使用，但在Firefox中运行良好。垂直图像正在扩展到不适合他们的容器，但在Firefox中，它们的行为与我想要的一样。这是代码，任何想法？感谢。
body{ max-width: 1970px;
margin: 0 auto;
padding: 0 2%;
box-sizing: border-box;
padding-top: 100px;
}
a {
text-decoration: none;
font-family: 'Karla', sans-serif;
font-size: 1em;
letter-spacing: -0.03em;
}
img {
max-width: 100%;
}
/***********************************
HEADING
************************************/
header {
float: left;
position:fixed;
top:0;
width: 100%;
z-index: 99;
background-color: white;
}
h1 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4.5em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
h2 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:4em;
font-weight: 700;
font-style: normal;
font-stretch: normal;
line-height: 3em;
}
h3 {
font-family: 'Karla', sans-serif;
font-weight: 400;
font-size:1.3em;
margin: 0 0 1em 0;
}
h4 {
font-family: 'Giorgio Sans Web', sans-serif;
margin: 0 auto;
font-size:2.5em;
font-weight: 700;
letter-spacing:0.0625em;
font-style: normal;
font-stretch: normal;
}
h5 {
font-family: 'Karla', sans-serif;
font-weight: 700;
font-size: 0.75em;
line-height: 1.2em;
}
p {
font-family: 'Karla', sans-serif;
line-height: 1.5em;
font-size: 1.2em;
letter-spacing: -0.03em;
}
/***********************************
NAVIGATION
************************************/
nav {
/*text-align: center;
margin: 0 2%;
box-sizing: border-box;*/
background-color: white;
}
#nav-parent {
height:;
display:flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}
.nav-icon {
flex-basis:auto;
}
#logo {
flex-basis:auto;
box-sizing: border-box;
padding-left: 20px;
}
.contact-button {
flex-basis:auto;
}
nav li a {
padding:0;
}
/***********************************
SIDE NAV
************************************/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: #F3F3F3;
overflow-x: hidden;
transition: 0.5s;
padding-top: 20px;
}
#sidenav-content {
margin-left: 13px;
}
.sidenav a {
text-decoration: none;
color: #000;
display: block;
transition: 0.3s;
}
.sidenav a h4 {
overflow: hidden;
white-space: nowrap;
padding: 16px 8px 0px 6px;
color: #000;
display: block;
transition: 0.1s;
}
.sidenav p {
padding: 0px 8px 8px 26px;
font-size: 16px;
color: #000;
display: block;
transition: 0.3s;
width: 250px;
}
.slide-nav-link {
margin-top: 10px;
padding: 8px 8px 8px 26px;
line-height: 2.2em;
}
.slide-nav-social {
width: 150px;
height:50px;
margin-top: 20px;
margin-left: 26px;
}
.slide-nav-social a {
width:20px;
padding: 0 15px 0 0;
display: inline-block;
}
.sidenav a:hover, .offcanvas a:focus{
color: #6B00FF;
}
.sidenav .closebtn {
padding: 15px 8px 8px 26px;
font-size: 30px;
margin-left: 0px;
}
.closebtn a:hover {
color: #000;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/***********************************
FOOTER
************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width:20px;
height: 20px;
margin: 0 5px;
}
/***********************************
PAGE: PORTFOLIO
************************************/
.gallery{
margin: 0 auto;
list-style: none;
padding-left: 0;
}
.gallery figure {
overflow: hidden;
float: left;
width: 48%;
margin: 1%;
z-index: 97;
position: relative;
float: left;
}
.gallery figcaption {
background: rgba(255,255,255,0.97);
display : flex;
align-items : center;
text-align: center;
color: white;
float: left;
position: absolute;
left: 0;
opacity: 0;
right: 0;
top: 0;
height:100%;
z-index: 98;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}
.gallery figcaption h3 {
width:100%;
text-align: center;
color:#000;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.gallery li:hover figcaption {
opacity: 1;
}
/***********************************
PAGE: Project
************************************/
.project-gallery{
margin: 0 auto;
padding: 0 1.5%;
list-style: none;
}
.project-gallery img{
max-width: 100%;
margin: 1.5% 0;
}
.project-gallery hr {
margin: 40px 0;
border: none;
height: 3px;
background-color: #000;
}
.project-title {
max-width: 100%;
text-align: center;
padding-top: 40px;
}
.description-text {
display:inline;
}
.left-column-text {
width:30%;
margin-left: 5%;
margin-top: 8px;
display:inline-block;
vertical-align: top;
}
.left-column-text p {
margin: 10px 0 25px 0;
}
.left-column-text h5 {
margin-bottom: -5px;
}
.right-column-text {
width:50%;
margin: 0 5% 0 8%;
display:inline-block;
vertical-align: top;
}
.vertical-imgs {
display: -webkit-flex; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-flex; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display:flex;
justify-content: space-between;
margin: 1% 0;
}
.vertical-img-left {
box-sizing: border-box;
padding-right: 3%;
}
.vertical-img-right {
box-sizing: border-box;
}
.prev-next-buttons {
margin-right: -3.7%;
}
.prev-next-buttons a {
display: inline-block;
margin: 0;
box-sizing: border-box;
padding: 20px 5%;
}
.prev-button {
width:48%;
}
.next-button {
text-align: right;
width:48%;
}
/***********************************
PAGE: About
************************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***********************************
PAGE: CONTACT
************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.mail a {
background-image: url('../img/mail.png')
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png')
}
.contact-info li.phone a {
background-image: url('../img/phone.png')
}
/***********************************
COLORS
************************************/
/* site body */
body {
background-color: #fff;
color:#000;
}
/*green header
header {
background: #6ab47b;
border-color: #599a68;
}*/
/*nav background on mobile
nav {
background: #599a68;
}*/
/*logo text */
h1 {
color: #000;
}
/*link color*/
a {
color:#000
}
/*nav link colors*/
nav a, nav a:visited {
color: #000;
}
/* selected nav link colors*/
nav a.selected, nav a:hover {
color: #5513FE
}
/* selected prev next link colors*/
a h1.selected, a h1:hover {
color: #5513FE
}
a h4.selected, a h4:hover {
color: #5513FE
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cari Sekendur - MHG Modern Classic</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="fonts/1606-HQIULX.css">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<nav>
<ul id="nav-parent">
<li class="nav-icon">
<span style="cursor:pointer" onclick="openNav()"
</span>
<img src="img/nav-icon.svg" class="nav-icon">
</li>
<li id="nav-icon">
<a href="index.html" id="logo">
<h1>CARI</h1>
</a>
</li>
<li class="nav-icon">
<a href="mailto:hello@carisekendur.com">Contact</a>
</li>
</ul>
</nav>
</header>
<div id="mySidenav" class="sidenav">
<div id="sidenav-content">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><img src="img/nav-icon-open.svg" class="nav-icon"></a>
<div class= "slide-nav-link">
<a href="index.html">Work</a>
<a href="about.html">About</a>
<a href="mailto:hello@carisekendur.com">Contact</a>
</div>
<div class= "slide-nav-text">
<a href="index.html" id="logo">
<h4>CARI SEKENDUR</h4>
</a>
<p>Creating visual experiences that make the complex clear and the average exceptional.</p>
</div>
<div class= "slide-nav-social">
<a href='https://workingnotworking.com/carileigh' target="_blank"><img src="img/WNWlogo.svg"></a>
<a href='https://www.linkedin.com/in/cskdr/' target="_blank"><img src="img/linkedin-black.svg"></a>
<a href='https://www.pinterest.com/cskdr/' target="_blank"><img src="img/pinterest-black.svg"></a>
</div>
</div>
</div>
<!--Click on the element below to open the side navigation menu.-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="wrapper">
<section class="project-gallery">
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_1.gif" alt="">
</div>
<div class="project-title">
<h2>MORGANS HOTEL GROUP - MODERN CLASSIC ZINE</h2>
</div>
<hr>
<div class="description-text">
<div class="left-column-text">
<h5>STUDIO</h5>
<p>LMNOP Creative</p>
<h5>CREATIVE DIRECTION</h5>
<p>Leigh Nelson</p>
<h5>DESIGN</h5>
<p>Cari Sekendur, Leigh Nelson, Heidi Chisholm</p>
</div>
<div class="right-column-text">
<p> Morgans Hotel Group launched the global phenomenon of boutique hotels 20 years ago, and to celebrate their rich history they put together a campaign called The Modern Classic. Each of Morgans' properties has a design aesthetic that is unlike anything you've seen before, awe-inspiring and always over-the-top. So, to capture the essence of Morgans' brand, we concepted, designed, and printed a zine for them to distribute to hotel guests. This project was a print designer's dream, complete with gold-holographic foil, gold staples, fluorescent Pantone inks, collage, illustration, a tear-out poster, and even a little pack of temporary tattoos.
</p>
</div>
<hr>
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_2.jpg" alt="">
</div>
<div class="vertical-imgs">
<img src="img/mhg-zine/CARI_MHG_ZINE_8.jpg" alt="" class="vertical-img-left">
<img src="img/mhg-zine/CARI_MHG_ZINE_5.jpg" alt="" class="vertical-img-right">
</div>
<div class="horiztonal-img">
<img src="img/mhg-zine/CARI_MHG_ZINE_7.jpg" alt="">
</div>
<div class="prev-next-buttons">
<a href="#" class="prev-button">
<h2>PREVIOUS</h2>
</a>
<a href="#" class="next-button">
<h2>NEXT</h2>
</a>
</div>
<hr class="bottom-hr" style="margin-top: 0px;">
</section>
<footer>
<p></p>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
使用：
#nav-parent {
display:flex;
display: -webkit-flex;
-webkit-flex-flow: initial;
flex-flow: initial;
justify-content: space-between;
align-items: center;
padding: 10px 3%;
margin: 0 auto;
}