1

サンプルページ

Firefox/IE10/Opera は、ウィンドウを縮小すると、画像を現在のサイズに維持し、スケーリングはまったく行われません。

Chrome は、私が望むようにすべてを比例して縮小する唯一のものです。Chrome が何か間違っているのか、他のすべてのブラウザーが間違っているのか、またはそれを修正する方法がわからない.

HTML

<section>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
</section>

CSS

section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
}

.card {
  margin: 0 5px;
  position: relative;
}
.card img {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  display: block;
  max-height: 100%;
  max-width: 100%;
}
4

1 に答える 1

-1

フレックスボックスの仕様は、過去数年間で多くの変更を経ており、さまざまなブラウザーが異なるバージョンの仕様を実装しています。現時点では、互換性のある動作が見られる可能性はほとんどありません。特に IE10 と Safari はどちらも、仕様の古いバージョンのほとんどが機能する実装を持っています。Firefox は最近サポートを実装しましたが、デフォルトでは有効になっていません。

特に、XUL 用の Mozilla CSS 拡張に基づいたフレックスボックスの元の設計は、既に固有のサイズを持つ要素のサイズを変更するためではなく、空のスペースを分配するためのものであったことに注意してください。このため、すべてのブラウザで目的を達成できるとは限りません。

flexbox実際の Web サイトでの使用にまだ興味がある場合は、 Modernizr、特にflexboxとflexboxlegacyのテストを確認してください。ほぼ確実に、両方のケースの一連のルールを作成することになります。

インストールしたブラウザのスクリーンショットを次に示します。

Firefox 21: Firefox 21 の Flexbox の例

Firefox 22: Firefox 22 の Flexbox の例

クローム 28: Chrome 28 の Flexbox の例

オペラ 15: ここに画像の説明を入力

Firefox と Opera の最近のバージョンが Chrome と同じように見えることを考えると、仕様の現在のステータスによると、これは正しい動作であると思います。したがって、他のブラウザは間違っています。それについてあなたができることについては、私がすでに上で述べたこと以外には何も言わないでしょう - 古いブラウザで検出されたサポートに基づいた別のアプローチを使用してください。

于 2013-06-03T22:59:42.033 に答える