Firefox和Safari MAC上的百分比高度表现不同

Question

我在这里遇到一个奇怪的问题，li元素的高度在firefox和safari中表现不同。

HERE IS THE FIDDLE DEMO

Another Simple Demo Lister先生建议 请参阅firefox和safari中的上述演示，但它无法正常工作。

HTML

<ul class="projectlist clearfix">
<li class="project">
    <a href="#" rel="16" class="ajax">
                <img width="340" height="236" src="http://placekitten.com/200/300" class="attachment-post-thumbnail wp-post-image" alt="5" />         
        <div class="projectinfo">
            <div class="meta">
                <h4>Something</h4>
                <h6><em>asdfasdf</em></h6>
            </div>
        </div>
    </a>
</li>
</ul>

CSS

.portfolio {
    width: 100%
}
.projectlist {
    width: 100%;
    margin-top: 50px;
    background: transparent
}
.projectlist li {
    width: 25%;
    height: 20%;
    float: left
}
.projectlist a {
    display: block;
    padding-bottom: 85px;
    position: relative
}
.projectlist a img {
    width: 100%;
    height: 100%;
}
.projectinfo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 100
}

火狐

Safari浏览器

Answer 1

评论中的答案：

仅在图片上使用width:100%;，然后移除height: 100%;。 这将告诉浏览器以一种尊重100％宽度的方式调整图像大小，或者更像是，修复你的宽度然后伸展你的腿。

这个答案需要一些改进。