Question

我的两个div没有在Safari中显示有问题。它们在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

尝试将“height：100％”添加到.bannerbuttons类

Answer 2

就我而言，有时在使用flexbox Safari时会搞砸。

赋予flex值为我解决了问题，例如flex：1 0自动

Div没有在Safari中显示

2 个答案: