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

【问题标题】：Img not showing in Safari, does show in ChromeImg 在 Safari 中不显示，在 Chrome 中显示
【发布时间】：2015-04-30 22:59:13
【问题描述】：

我觉得我在这里遗漏了一些东西。我有一个客户端的网站，其中图像在 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%;
}

【问题讨论】：

标签： html css image google-chrome safari

【解决方案1】：

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

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

您不需要任何其他更新。

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

.gallery li{
   position:relative;
}

【讨论】：