1
私はクロームで、この効果を達成するために、相対/絶対位置とz屈折率変化の組み合わせを使用しています：、本部スタッキングの問題だけ
そして、それはそうしますが、Safariでそれは、このことを行います
以下は、私はちょうどので、任意のヘルプは素晴らしいことだCSSスタイルとクロスブラウザの互換性の複雑さを学んでいる、私のCSSとHTMLマークアップです。以下は
//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のレイアウトには何の影響もありませんでした。
解決済み：Safariで正しく表示されるように、子divに高さ：100％を明示的に追加する必要がありました。
bady、header-wrap div、またはheader要素のように見えますが、サファリの余白/パディングの影響を受けます。おそらく、すべての要素をテストするために 'box-sizing：border-box'を明示的に設定してみてください。 – TBB
@TBBなので、こういうものを使ってください： '{{box-sizing：border-box; } '要素をテストするには？ –
素晴らしい！ブラウザのコードにアクセスすることなく、他の人がこのような問題を理解することは非常に困難な場合があるため、答えを提出して、どの子divの意味を明確にするべきです。 – TBB