我使用相对/绝对定位和z-index变化的组合来实现chrome中的这种效果：
它确实如此，但在Safari中，它会这样做：
下面是我的CSS和HTML标记，我只是学习CSS样式和跨浏览器兼容性的复杂性，所以任何帮助都会很棒。
//Content padding for headerspace
#contact, #non-home {
padding-top: 120px; }
#contact .focus, #non-home .focus {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
//Start of bg blur styling
#contact .focus .blur, #non-home .focus .blur {
position: absolute;
z-index: 2;
min-width: 80vw;
min-height: 600px;
background-position: top -4px left -140px;
background-image: url("/assets/img/italy_1.jpg");
background-size: 119%;
-webkit-filter: blur(10px);
filter: blur(10px); }
//container styling for form
#contact .focus .container, #non-home .focus .container {
z-index: 2;
position: relative;
min-width: 80vw;
min-height: 600px;
background: rgba(255, 255, 255, 0.8); }
//direct styling on the form
#contact .focus .container form, #non-home .focus .container form {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column; }
#contact .focus .container form .form-group, #non-home .focus .container form .form-group {
width: inherit;
padding-left: 200px;
margin: 5px; }
#contact .focus .container form .form-group input, #non-home .focus .container form .form-group input {
width: 400px;
margin-left: 50px; }
#contact .focus .container form .form-group #name, #non-home .focus .container form .form-group #name {
margin-left: 50px; }
#contact .focus .container form .form-group #name-label, #non-home .focus .container form .form-group #name-label {
margin-left: 30px; }
#contact .focus .container form .form-group #email-label, #non-home .focus .container form .form-group #email-label {
padding-left: 32px; }
#contact .focus .container form .form-group #email, #non-home .focus .container form .form-group #email {
margin-left: 50px; }
#contact .focus .container form .form-group textarea, #non-home .focus .container form .form-group textarea {
margin-left: 20px;
width: 400px;
height: 100px; }
#contact .focus .container form .form-group #questions-label, #non-home .focus .container form .form-group #questions-label {
position: relative;
top: -50px;
left: -25px;
margin-left: -40px; }
#contact .focus .container form .submit, #non-home .focus .container form .submit {
margin-top: 20px;
margin-left: 500px; }
#contact .focus .container form p, #non-home .focus .container form p {
margin-top: 50px;
margin-left: 325px; }
//formatting on the background image to place it at top right to obtain the blurred effect.
#contact .bg, #non-home .bg {
z-index: 1;
min-width: 100vw;
background-image: url("/assets/img/italy_1.jpg");
background-size: cover;
position: absolute;
top: 0;
bottom: 0; }
HTML下方：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
<div class="header-wrap">
<header>
<title>Personalized Travel Planning</title>
<a href="/"><img class="logo" src="/assets/img/logo.jpg" /></a>
<div class="flex-container">
<ul class="site-nav">
<li><a class="about" href="/about/">About</a></li>
<li><a class="contact" href="/contact/">Contact</a></li>
<li><a class="packages" href="/packages/">Packages</a></li>
<li><a class="deals" href="/deals/">Deals and Promotions</a></li>
</ul>
</div>
</header>
</div>
<div class="content-wrap" id="contact">
<div class="focus">
<div class="blur"></div>
<div class="container">
<form method="POST" action="contact.php">
<div class="form-group">
<label id="name-label" for="name">Name:</label>
<input class="form-control" id="name" type="text" placeholder="Name (Required)" name="name" />
</div>
<div class="form-group">
<label id="email-label" for="email">Email:</label>
<input class="form-control" id="email" type="text" placeholder="someone@gmail.com (Required)" name="email" />
</div>
<div class="form-group">
<label id="questions-label" for="questions">Questions/ Concerns:</label>
<textarea class="form-control" id="questions" cols="40" rows="10" placeholder="Please let us know of any questions you may have!" name="questions"></textarea>
</div>
<div class="submit">
<input class="form-control" id="submit" type="submit" name="Submit" />
</div>
<p>Or feel free to reach out to us on Facebook! See below for a link.</p>
</form>
</div>
<div class="bg"></div>
</div>
</div>
<div class="footer-wrap">
<ul>
<li>Personalized Travel Planning, LLC</li>
<li>P.O. Box 54</li>
<li>Walterboro, South Carolina 29488</li>
</ul>
<div class="social-wrap">
<p>Find Us: </p>
<a href="http://www.facebook.com/PersonalizedTravelPlanning"><img class="facebook" src="/assets/img/facebook.png" /></a>
</div>
<p>2016. Designed by Melton Development.</p>
</div>
</body>
</html>
更新：添加* {box-sizing：border-box;到CSS并且它对Safari中的布局没有影响。
已解决：必须向子div明确添加高度：100％才能在Safari中正确显示。
答案 0 :(得分：0)
由于某种原因，子div bg的高度不是从父div，容器继承的。因此必须添加高度100％属性，并且对bg类div的特异性是错误的，因此也进行了更正。
//Content padding for headerspace
#contact, #non-home {
padding-top: 120px; }
#contact .focus, #non-home .focus {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center; }
//Start of bg blur styling
#contact .focus .blur, #non-home .focus .blur {
position: absolute;
z-index: 2;
min-width: 80vw;
min-height: 600px;
background-position: top -4px left -140px;
background-image: url("/assets/img/italy_1.jpg");
background-size: 119%;
-webkit-filter: blur(10px);
filter: blur(10px); }
//container styling for form
#contact .focus .container, #non-home .focus .container {
z-index: 2;
position: relative;
min-width: 80vw;
min-height: 600px;
background: rgba(255, 255, 255, 0.8); }
//direct styling on the form
#contact .focus .container form, #non-home .focus .container form {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column; }
#contact .focus .container form .form-group, #non-home .focus .container form .form-group {
width: inherit;
padding-left: 200px;
margin: 5px; }
#contact .focus .container form .form-group input, #non-home .focus .container form .form-group input {
width: 400px;
margin-left: 50px; }
#contact .focus .container form .form-group #name, #non-home .focus .container form .form-group #name {
margin-left: 50px; }
#contact .focus .container form .form-group #name-label, #non-home .focus .container form .form-group #name-label {
margin-left: 30px; }
#contact .focus .container form .form-group #email-label, #non-home .focus .container form .form-group #email-label {
padding-left: 32px; }
#contact .focus .container form .form-group #email, #non-home .focus .container form .form-group #email {
margin-left: 50px; }
#contact .focus .container form .form-group textarea, #non-home .focus .container form .form-group textarea {
margin-left: 20px;
width: 400px;
height: 100px; }
#contact .focus .container form .form-group #questions-label, #non-home .focus .container form .form-group #questions-label {
position: relative;
top: -50px;
left: -25px;
margin-left: -40px; }
#contact .focus .container form .submit, #non-home .focus .container form .submit {
margin-top: 20px;
margin-left: 500px; }
#contact .focus .container form p, #non-home .focus .container form p {
margin-top: 50px;
margin-left: 325px; }
//formatting on the background image to place it at top right to obtain the blurred effect.
#contact .focus .bg, {
z-index: 1;
min-width: 100vw;
**height: 100%;**
background-image: url("/assets/img/italy_1.jpg");
background-size: cover;
position: absolute;
top: 0;
bottom: 0; }