1

固定の高さ (たとえば 200 ピクセル) とギャラリーに並べて配置された一連の画像 (アスペクト比が維持され、200 ピクセルの高さに合わせて縮小) を持つ水平スクロール画像ギャラリーを構築しようとしています。画像がブラウザーの幅を超える場合、ギャラリーの水平スクロールバーが提供されます。

Firefox での動作に問題があります。Firefox では、画像を含む div は子画像が縮小されていないかのように動作するため、画像間に多くの空白が残ります。ギャラリーは、Chrome と Safari で期待どおりに機能します。

可能な限り短い行で問題を再現するために jsfiddle を作成しました。Firefox と別のブラウザーで観察してください。

.container {
    height: 200px; /* Want a fixed height for container. */
    white-space: nowrap; /* Want elements to display side-by-side, for horizontal scrolling. */
    overflow: auto; /* Want scrollbars on .container. */
}

.container > .element {
    display: inline-block;
    height: 100%;
}

.element > img {
    height: 100%;
}

私は何か間違ったことをしていますか？縮小された画像コンテンツに合わせて .element を縮小する方法はありますか?

画像とは別に、画像の上にテキストオーバーレイが必要であることに注意してください（jsfiddleには反映されません）。これが、画像を.element divで囲むことを選択した理由です（位置を指定できるようにするためです：相対次に、絶対配置の子オーバーレイを追加し、インライン ブロックの表示を選択します (これにより、子オーバーレイを .element の下部に揃えることができます)。

4

1 に答える 1

3

https://bugzilla.mozilla.org/show_bug.cgi?id=829958が表示されます

良いニュースは、これが Firefox 25 で修正されたことです。悪いニュースは、Firefox 25 が 10 月 28 日まで出荷されないことです。

現時点での回避策として.container > .element、パーセンテージの高さではなく固定の高さを指定するとうまくいきます... または.container、オーバーフロー スタイルを持つ親を代わりに指定します。このバグを回避するための重要な部分は、目に見えるオーバーフローがあるものの高さを固定することです。

于 2013-09-17T06:33:59.503 に答える