10

Firefox で奇妙な問題が発生しました。

一定の px 値で定義された高さの div があり、その中に img 要素があります。Chrome ではこの設定に問題はありませんが、Firefox では親 div の幅がその中の img よりも大きくなっています。

これはhtml構造です：

<div class="wrapper">
    <div class="imageHolder">
        <img src='dasource'>
    </div>
</div>

そして、これはcssです：

.wrapper {
    width: 900px;
}

.imageHolder {
    height: 400px;
    width: auto;
    background-color: green;
    float: left;
    max-width: 50%;
    overflow: hidden;
}

.imageHolder img {
    height: 100%;
}

http://jsfiddle.net/MXudn/6

このフィドルで説明されているように、Firefox では、親 div がその中の画像よりも大きいことがわかります。

これが事実である理由はありますか？

4

1 に答える 1

4

これは、私には Firefox のバグのように見えます。何らかの理由overflow: hiddenで、親divがスケーリング後ではなく、スケーリングされていない画像の幅を使用するようになっています。

http://jsfiddle.net/MXudn/8

<div class="imageHolder">
    <img src='http://placehold.it/650x650' />
<div>

.imageHolder {
    height: 400px;
    background-color: green;
    float: left;
    overflow: hidden;
}

.imageHolder img {
    height: 100%;
}

この簡素化された例では、問題を明確に確認できます。画像は元々650px幅広ですが、高さを元にリスケールすると400px幅広になります。ただし、親は650px広いままです。

overflow: hidden単純に削除する必要がない場合は、問題を解決します。

http://jsfiddle.net/MXudn/12/

編集: この問題の Firefox bugzilla チケット。

于 2013-06-27T17:17:38.287 に答える