DivがSafariに表示されない

Question

Safariに表示されていない2つのdivで問題が発生しています。 ChromeとFirefoxでうまく表示されます。 .phquoteと.designquoteクラスのボタンは、最初のページに表示されていません。ここに私のウェブサイトを調べるためのリンクがありますhttp://shellhammersara.se

私は画像に何か問題があるかどうか試しましたが、それはそうではありません。私はそれらを取り出して、ちょうど背景色をdivに追加しましたが、それはまだ表示されませんでした。

誰でもこの問題を解決できますか？以下は

私のコードです：

HTML

<main> 

     <div id="homebanner"> 

     <div class="bannerbuttons"> 

      <a href="photography.html" class="phquote"></a> 
      <a href="myfavorites.html" class="designquote"></a> 
      <a href="contact.php" class="contactbtn"></a> 

     </div> 

    </div> 

    </main> 

CSS

#homebanner { 
    background-image: url("Images2/home.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 500px; 
    margin-top: -33px; 
} 
    .contactbtn { 
    display: none; 
} 
    .bannerbuttons { 
    width: 55%; 
    margin: 0 auto; 
} 

.phquote { 
    float: left; 
    width: 50%; 
    height: 45%; 
    margin-top: 40px; 
    background-repeat: no-repeat; 
    background-image: url("/Images2/ph-quote-400.png"); 
    -o-background-size: contain; 
    -moz-background-size: contain; 
    -webkit-background-size: contain; 
} 

.phquote:hover { 
    background-repeat: no-repeat; 
    background-image: url("Images2/ph-quote-hover-400.png"); 
-o-background-size: contain; 
    -moz-background-size: contain; 
    -webkit-background-size: contain; 
} 

.designquote { 
    float: left; 
    width: 50%; 
    height: 45%; 
    margin-top: 190px; 
    background-repeat: no-repeat; 
    background-image: url("Images2/design-quote-400.png"); 
    -o-background-size: contain; 
    -moz-background-size: contain; 
    -webkit-background-size: contain; 
} 

.designquote:hover { 
    background-repeat: no-repeat; 
    background-image: url("Images2/design-quote-hover-400.png"); 
    -o-background-size: contain; 
    -moz-background-size: contain; 
    -webkit-background-size: contain; 

} 

Answer 1

は追加してください "の高さを100％" .bannerbuttonsクラスに