我是一名 CS 新生，几周前我实现了一个网站，但我只使用 Safari 来验证输出，它在 Google Chrome 上看起来更加不同。我怎样才能在那个页面上解决这个问题？我正在为 .showcase-container 使用 vh 但它在 Chrome 中看起来太小了。
Safari 浏览器 View :
谷歌浏览器 View :
CSS
/*ShowCase*/
body{
background :#e6e6e6;
overflow-x: hidden;
}
#showcase{
position: relative;
color:white;
padding: 2rem;
background: #333;
}
#showcase::before{
content:"";
position: absolute;
background: url("../images/about/header-1.png") no-repeat center center/cover;
top:0;
left:0;
width:100%;
height: 100%;
opacity: 0.4;
}
#showcase .showcase-container{
display:grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
align-items: center;
height:25vh;
}
#showcase .showcase-content{
z-index:100;
}
.presentation .presentation-container{
padding:5rem;
margin:2rem;
align-items: center;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../mobile.css">
<link rel="stylesheet" href="about.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<link rel="icon" type="image/png" href="../images/icon.ico">
<title>About Us | Asia HR</title>
</head>
<body id="home">
<nav id="navbar">
<h1 class="logo">
<span class="text-primary">
<i class="fas fa-book-open"></i>Asia
</span> HR
</h1>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="../services/services.html">Our Services</a></li>
<li><a href="../search/search.php">Job Search</a></li>
<li><a href="../article/article.php">Blog</a></li>
<li><a href="../contact/contact.php">Contact</a></li>
</ul>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<body>
<header id="showcase">
<div class="container">
<div class="showcase-container">
<div class="showcase-content">
<h1>What We Do</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, tempora ullam velit quibusdam fugit odit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque enim ullam aperiam quidem? Illum nihil suscipit eveniet.</p>
</div>
</div>
</div>
</header>
<div class="presentation">
<div class="presentation-container">
<div class="presentation-text">
<h1>Our Values</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit sit illum quod dolores sint cumque?. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, culpa.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam fugiat earum doloremque ea quaerat voluptate tempora unde, labore, ab tenetur beatae, vitae quos corrupti rem iusto distinctio iste explicabo dolorum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus quas praesentium magnam fugiat sed. Vel beatae nemo laboriosam nobis quam recusandae totam eaque quos obcaecati architecto. Quia id eius est animi saepe officia tempora! Dolor aperiam eos ipsum nesciunt officia quam tempora dolorem. Quam, temporibus.</p>
</div>
</div>
</div>
<!--Team-->
<div class="team-section">
<h2>Our Team</h2>
<span class="border border-1"></span>
<div class="ps">
<div class="p">
<a href="#p1"><img src="../images/home/h1.jpg"></a>
</div>
<div class="p">
<a href="#p2"><img src="../images/home/h2.jpg"></a>
</div>
<div class="p">
<a href="#p3"><img src="../images/home/h3.jpg"></a>
</div>
</div>
<div class="section" id="p1">
<span class="name">Sophia Letana</span>
<span class="border border-1"></span>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
<div class="section" id="p2">
<span class="name">Francois Le Chene</span>
<span class="border border-1"></span>
<p>gh ghgh ghg sit, amet consectetur ghgh elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
<div class="section" id="p3">
<span class="name">Steve Mansoa</span>
<span class="border border-1"></span>
<p>Lghgh ipsum gh sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
</div>
</body>
<!-- Footer -->
<div class="footer">
<div class="footer-sections">
<div class="adress-footer">
<h4>Contact</h4>
<p>102, Pyidaungsu Yeithka Road,
Yangon, Myanmar</p>
<p>+33 6 24 15 14 02</p>
<p>contact@hrasia.com</p>
</div>
<div class="menu-footer">
<h4>Operating Hours</h4>
<p>Monday - Friday : 8 a.m - 5 p.m</p>
<p>Saturday : 9 a.m - 1 p.m</p>
<p>Sunday : closed</p>
</div>
<div>
<h4>Blog</h4>
<p>Read our latest posts</p>
<p>How to write a resume ?</p>
<p>The interview process</p>
</div>
</div>
<div class="footer-bottom">
<p>© hrasia.com | Designed by Pierre-Alexandre Mousset</p>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGtFf0pMBZa-fBYFkG-pANG4UdvD1Q_es&callback=initMap"
async defer></script>
<script src="../main.js"></script>
<script src="contact.js"></script>
</script>
</html>
最佳答案
不应将高度用于展示容器。而是为 div 使用填充。这将让它根据需要增长。
#showcase .showcase-container{
display:grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
}
或者你也可以设置min-height，如果你想让展柜有一定的高度。
#showcase .showcase-container{
display:grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
align-items: center;
min-height:25vh;
padding-top: 20px;
padding-bottom: 20px;
}
提供高度将使它保持这种状态并且不会扩展，尽 pipe 元素要求它。
关于CSS - Chrome 和 Safari 之间的大小不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57638893/