html - css 样式列表中有一个漏洞，但为什么呢？

Question

我在一个网站上工作，刚刚意识到，我的元素列表中有一个完整的元素，但我找不到问题所在:

http://www.einfall7.ch/beta/category/manufaktur/moebel/

html代码:

<li class="col-xs-12 col-sm-6 col-md-4">
                <a href="http://www.einfall7.ch/beta/manufaktur/massives-nussbaumbett/" class="title" title="massives nussbaumbett">
                    <img width="500" height="313" src="http://www.einfall7.ch/beta/wp-content/uploads/2014/04/dsc_0142-500x313.jpg" class="attachment-thumbnail size-thumbnail colorbox-1376  wp-post-image" alt="Zoller Nussbaum Doppelbett">                <span>massives nussbaumbett</span></a>
            </li>

CSS:

#content ul.ref{
margin: -15px;
padding: 0px;
}

#content ul.ref li{
    margin: 0px;
    list-style-type: none;
    padding: 15px;
}

ul.ref li a > span{
    display: block;
    position: absolute;
    bottom: 14px;
    height: 38.196%;
    overflow: hidden;
    width: calc(100% - 30px);
    padding: 15px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-size: 1.5em;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#a6000000',GradientType=0 );
          -moz-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
          -o-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

    ul.ref li a:hover > span, ul.ref li a.hover_effect > span{
        background-color: rgba(0,0,0,0.5);
    }

Answer 1

你的问题在这里:

img[src$=".png"] {
  background-color: #fff;
  margin-bottom: 5px;
}

只需删除 margin-bottom,

因为这是您列表中唯一的 png，您可能不想要删除 margin-bottom 因为您正在使用它在您网站的其他地方，解决方案是将 png 更改为 jpg src。