Div在Safari中未顯示

我遇到了兩個未在Safari中顯示的div。他們在Chrome和Firefox上表現良好。第一頁上沒有顯示.phquote和.designquote類的按鈕。這裏是我的網站鏈接檢查http://shellhammersara.se Div在Safari中未顯示

我試圖看看是否有任何錯誤的圖像，但事實並非如此。我試圖把它們拿出來，只是添加背景顏色的股利，它仍然不會顯示。

任何人都可以請幫我解決這個問題嗎？

下面是我的代碼：

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; 

}

來源

2017-10-05 sara

你需要知道，沒有瀏覽器在許多年和版本中都需要這些供應商前綴。你可以安全地刪除它們。 – Rob

嘗試添加「高度：100％」來.bannerbuttons類

來源

2017-10-05 19:37:41 Eliellel

這工作！非常感謝 – sara

Div在Safari中未顯示

回答

相關問題