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

Question

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

这是小提琴演示

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
}

火狐

苹果浏览器

Answer 1

来自评论的答案：

仅width:100%;在图像上使用并删除height: 100%;. 这将告诉浏览器以尊重 100% 宽度的方式调整图像大小，或者更像是固定宽度然后伸展腿。

这个答案需要一些改进。