Html 仅在Safari中存在Div堆叠问题
我在chrome中使用相对/绝对定位和z索引变化的组合来实现这种效果： 它是这样做的，但在Safari中，它是这样做的： 下面是我的CSS和HTML标记，我只是在学习CSS样式和跨浏览器兼容性的复杂性，所以任何帮助都会很好Html 仅在Safari中存在Div堆叠问题,html,css,safari,Html,Css,Safari,我在chrome中使用相对/绝对定位和z索引变化的组合来实现这种效果： 它是这样做的，但在Safari中，它是这样做的： 下面是我的CSS和HTML标记，我只是在学习CSS样式和跨浏览器兼容性的复杂性，所以任何帮助都会很好 //Content padding for headerspace #contact, #non-home { padding-top: 120px; } #contact .focus, #non-home .focus { position: rela
//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; }
<!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>
个性化旅游规划
姓名：
电邮：
问题/关注：
或者在Facebook上随时联系我们！请参阅下面的链接
- 个性化旅游规划有限责任公司
- 邮政信箱54
- 南卡罗来纳州沃尔特伯勒29488
找到我们：
2016年。由梅尔顿开发公司设计
已解决：必须显式地将height:100%添加到子div，以使其在Safari中正确显示。由于某些原因，子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; }
由于某些原因，子div bg的高度不是从父div container继承的。因此，必须添加高度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; }
看起来bady、header wrap div或header元素都受到safari的边距/填充的影响。也许可以尝试明确地为所有要测试的元素设置
box size:border-box*{box size:border-box；}box size:border-box*{box size:border-box；}