Div在Safari中未显示
问题描述:
我遇到了两个未在Safari中显示的div。他们在Chrome和Firefox上表现良好。第一页上没有显示.phquote和.designquote类的按钮。这里是我的网站链接检查http://shellhammersara.seDiv在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;
}
你需要知道,没有浏览器在许多年和版本中都需要这些供应商前缀。你可以安全地删除它们。 – Rob