1
Я использую комбинацию относительного/абсолютного позиционирования и изменения Z-индекс для достижения этого эффекта в хроме:Div стак в Safari только
И это так, но в Safari, он делает это:
Ниже мой CSS и HTML Markup, я только учусь тонкости CSS Styling и Cross-Browser сОВМЕСТИМОСТИ так что любая помощь будет большим.
//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="[email protected] (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>
Обновление: Добавлена * {коробчатого проклейки: граница-бокс; } в CSS, и это не повлияло на макет в Safari.
SOLVED: Если бы явное добавление высоты: 100% для дочернего div, чтобы он отображался правильно в Safari.
Похоже, что либо bady, либо div заголовка, либо элемент заголовка зависит от поля/дополнения с помощью сафари. Возможно, попробуйте явно установить 'box-sizing: border-box' для всех тестируемых элементов. – TBB
@TBB Так что используйте что-то вроде этого: '* {box-sizing: border-box; } 'для проверки элементов? –
Отлично! Вы должны представить свой ответ и уточнить, какой дочерний div вы имели в виду, потому что, не имея доступа к коду в браузере, для других может быть очень сложно понять такие проблемы, как этот. – TBB