css - 仅在 Firefox 中为空白

Question

火狐:

Chrome :

有谁知道为什么在 Firefox 中会发生这种情况？这让我发疯

这是CSS:

 #gallery_grid .gallery_grid_item,#related_topics .gallery_grid_item,#popular_galleries .gallery_grid_item {
position:relative;
overflow:hidden;
display:block;
text-decoration:none;
}

#gallery_grid .gallery_grid_item {
width:288px;
height:260px;
box-shadow:0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 3px rgba(34,25,25,0.4);
transition:margin .1s;
-moz-transition:margin .1s;
-webkit-transition:margin .1s;
-o-transition:margin .1s;
margin:15px;
}

#gallery_grid .gallery_grid_item:hover {
margin:13px 15px 17px;
}

#gallery_grid .gallery_grid_image_wrapper {
width:100%;
height:190px;
overflow:hidden;
}

#gallery_grid .gallery_grid_image {
min-height:100%;
}

#popular_galleries .gallery_grid_item,#gallery_grid .gallery_grid_item {
border:1px solid #999;
}

#related_topics .gallery_grid_item {
border:0!important;
width:242px;
height:140px;
overflow:hidden;
background:#181818;
margin:0;
}

#popular_galleries .gallery_grid_item {
width:200px;
height:140px;
letter-spacing:-.05em;
background:#181818;
margin:0 0 15px;
}

#popular_galleries.upsell .gallery_grid_item {
height:200px;
}

#related_topics .gallery_grid_item:nth-child(even) {
border:1px solid #777!important;
border-width:0 1px;
}

#gallery_grid .gallery_grid_item:hover,#related_topics .gallery_grid_item:hover,#popular_galleries .gallery_grid_item:hover {
border:1px solid #86d3ff;
}

#gallery_grid .gallery_grid_image,#related_topics .gallery_grid_image,#popular_galleries .gallery_grid_image,#related_topics .gallery_list_image {
width:100%;
overflow:hidden;
opacity:.9;
filter:alpha(opacity=90);
transition:opacity .1s;
-moz-transition:opacity .1s;
-webkit-transition:opacity .1s;
-o-transition:opacity .1s;
text-align:center;
display:block;
margin:0 auto;
}

#gallery_grid .gallery_grid_item:hover .gallery_grid_image,#related_topics .gallery_grid_item:hover .gallery_grid_image,#popular_galleries .gallery_grid_item:hover .gallery_grid_image,#related_topics .gallery_list_item:hover .gallery_list_image {
opacity:1;
filter:alpha(opacity=100);
}

#popular_galleries .gallery_grid_info,#related_topics .gallery_grid_info {
width:100%;
position:absolute;
bottom:0;
font-weight:500;
}

#gallery_grid .gallery_grid_info {
height:62px;
}

#related_topics .gallery_grid_info {
height:54px;
}

#popular_galleries .gallery_grid_info {
height:58px;
}

#related_topics.grid .gallery_title,#popular_galleries .gallery_title {
color:#fff;
text-shadow:1px 0 1px #000;
font-size:15px;
line-height:18px;
}

#gallery_grid .gallery_title {
font-size:16px;
line-height:21px;
color:#000;
text-shadow:none;
font-weight:600;
border-top:2px solid #00a3ff;
padding:10px 15px 0;
}

#gallery_grid .gallery_title:hover {
text-decoration:underline;
}

#popular_galleries .gallery_title {
height:39px;
overflow:hidden;
}

.trans_bg {
width:100%;
height:100%;
background:#000;
opacity:.5;
filter:alpha(opacity=50);
}

.content_over_transparent {
position:absolute;
top:0;
width:100%;
height:100%;
overflow:auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
}

#gallery_grid .content_over_transparent,#related_topics .content_over_transparent {
padding:10px 15px 0;
}

#popular_galleries .content_over_transparent {
padding:10px 10px 0;
}

它是“content_over_transparent”。感谢任何帮助，谢谢!

编辑:

这是网格元素 HTML(添加更多内容，因为它说它主要是代码):

  <a class="gallery_grid_item" href="#">
<img class="gallery_grid_image" src="http://d1qfo1bk8s78mq.cloudfront.net/uimg/5f9aa039ecf554f73312d912e22c516e.x355" />
<div class="gallery_grid_info">
<div class="trans_bg"></div>
<div class="content_over_transparent">
<p class="gallery_title">Finding your Perfect Red</p>
</div>
</div>
</a>

Answer 1

在.content_over_transparent中添加overflow: hidden;，在FF和Chrome上都能正常显示:

.content_over_transparent {    
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;                 /* Delete that */
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    overflow: hidden;              /* Add that */
}

顺便说一句，在您的问题中，您忘记了将 HTML 代码包装在 #popular_galleries 中。

这是 fiddle :Fiddle