2

Web ページの 1 つに流動的な画像の背景を実装しようとしています。Chrome では問題なく動作しますが、Firefox では動作しません。ブラウザウィンドウのサイズが変更されると、比例してサイズが変更される2つの正方形のpng画像があります。

html は次のとおりです。

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Test Flex</title>
</head>
<body>
<div id="parent_div">
    <div id="bluesquare_div"></div>
    <div id="yellowsquare_div"></div>
</div>
</body>
</html>

CSS は次のとおりです。

body{
    background: #444444;
}

#parent_div{
    display: flex;
}

#bluesquare_div{
    width: 50%;
    background: url("bluesquare.png");
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 50%;
    flex-grow: 1;
}


#yellowsquare_div{
    width: 50%;
    background: url("yellowsquare.png");
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 50%;
    flex-grow: 1;
}

問題は、Firefox で出力が表示されないことです。使用しない場合display:flex、Firefox で 2 つの四角が表示されますが、私の Web ページでは flexbox を使用する必要があるため、ドロップできません。

Firefox で動作しない理由を知っている人はいますか?

Chrome バージョンのスクリーンショットは次のとおりです: 55.0.2883.87 m

クロムのスクリーンショット

Firefox バージョンのスクリーンショットは次のとおりです: 50.1.0

ファイアフォックスのスクリーンショット

4

1 に答える 1

3

問題はpadding-top: 50%フレックスアイテムに与えられたものです!

Margins / paddings は通常width、その ではなく、包含ブロックのに対して解決されheightます。しかしflexbox、ユーザー エージェント (ブラウザ) の間で混乱が生じている場合は、次のように推測します。

  1. Chromewidthはフレックスアイテムのに基づいて解決します

  2. Firefoxheightは flex-items に基づいて解決します

CSS Flexbox Specの警告を参照してください:

作成者は、フレックス アイテムのパディングまたはマージンにパーセンテージを使用することは完全に避けるべきです。異なるブラウザーでは異なる動作が得られるからです。

理想的には、別の方法を考える必要があります - おそらく修正として、パーセンテージの代わりに単位をビューポートpaddingすることができ、必要ありませんheight: 0- 以下のデモを参照してください:

body {
  background: #444444;
}
#parent_div {
  display: flex;
}
#bluesquare_div {
  width: 50%;
  background: url("http://placehold.it/100x100");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 50vh;
  flex-grow: 1;
}
#yellowsquare_div {
  width: 50%;
  background: url("http://placehold.it/100x100");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 50vh;
  flex-grow: 1;
}
<div id="parent_div">
  <div id="bluesquare_div"></div>
  <div id="yellowsquare_div"></div>
</div>

于 2016-12-18T07:50:53.617 に答える