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{}班级

您不需要任何其他更新。

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

.gallery li{
   position:relative;
}

我没有在Safari中显示，确实在Chrome中显示

3 个答案: