1

ここで奇妙な問題が発生しています.li要素の高さは、FirefoxとSafariで異なる動作をします.

フィドルのデモはこちら

Mr 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
}

ファイアフォックス

ここに画像の説明を入力

サファリ

ここに画像の説明を入力

4

1 に答える 1

1

コメントからの回答:

画像のみwidth:100%;に使用し、 を削除しheight: 100%;ます。これにより、ブラウザは幅の 100% を尊重するように画像のサイズを変更するように指示されます。たとえば、幅を固定してから足を伸ばすように指示されます。

この回答には改善が必要です。

于 2013-10-08T20:42:42.130 に答える