Img在Safari中不显示，在Chrome中显示

Question

我觉得我好像漏掉了什么。我有一个客户网站，其中的图像显示完美的Chrome，只是没有完全出现在Safari。我只使用HTML和CSS。有什么想法吗？现场在angelahartley.net

HTML：

<ul class="gallery">
<li><img src="img/home1.jpg" title="newborn greta: by Josh Muir" alt="newborn greta in arms"></li>
<li><img src="img/home2.jpg" title="newborn greta: by Josh Muir" alt="baby greta on a rainbow"></li>
<li><img src="img/home3.jpg" title="photo by Santa Cruz Birth Photography" alt="baby, mom, and dad in birthing pool"></li>
</ul>

CSS：

    .gallery {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background-color: #947960;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}
.gallery li {
    float: left;
    width: 33.33333333%;
    margin: 4px .5% 1px .5%;
    padding: 0 ;

}
img {
    max-width: 100%;
    border: 1px solid #00565E;
    border-radius: 2.5%;
}

Answer 1

将position:relative;添加到.gallery li{}类中

您不需要任何其他更新。

问题是，z索引会丢失，除非您将位置定义为默认的“静态”值以外的位置。

.gallery li{
   position:relative;
}

Answer 2

从css中删除所有显示规则，它应该可以工作。

Answer 3

你的display:-webkit-box;似乎是问题所在。把它移开，就会没事的。

.gallery {
width: 100%;
margin: 0 auto;
padding: 0;
list-style: none;
background-color: #947960;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
}