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中未显示

回答

相关问题