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

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

Answer 2

问题似乎出在您的 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;
}

Answer 3

将 position:relative; 添加到您的 .gallery li{} class

您不需要任何其他更新。

问题是 z-index 会丢失，除非您将位置定义为位置的默认 'static' 值以外的值。

.gallery li{
   position:relative;
}

Img 未在 Safari 中显示，但在 Chrome 中显示

Img not showing in Safari, does show in Chrome

html

css

safari

google-chrome

image