CSS Firefox問題：在調整大小時，保持Flexbox內部不同寬度的並排div的相對大小

Question

我使用Flexboxes（打開內部旁邊的封閉封面）創建不同尺寸和方向的卡片的圖像庫。近期的Chrome和Safari版本調整/縮小不同寬度圖像的並排div，很好，在瀏覽器窗口縮小時尊重/保持兩個div的相對大小。 Firefox遇到了限制，並開始更加積極地縮小更大的div/img，導致2個不同高度的2個div，並破壞原始佈局關係。

有沒有這個問題的CSS解決方案，而不是訴諸多個div不同百分比爲每個獨特的div大小差異或使用@media調用。尋找一個優雅的解決方案（一個div包裝器），可以在保持相對高度或寬度的同時縮放並排div並保持相對高度或寬度，而不管卡片放置在div中的尺寸是多少。

我已經嘗試了2個百分比的並排，它工作正常，如預期。但是這個解決方案需要創建一堆單獨的CSS div來滿足Firefox。

在下面的jpg示例中，封面圖片是摺疊卡和平面卡的相同文件。唯一的區別是底部平卡有css圓角。顯然問題在於摺疊卡片示例的兩種不同寬度。

如果這是唯一的補救措施，我會使用.js解決方案。但我目前的.js技能處於「剪切和粘貼」的水平。 （我的CSS技巧可能只是稍微更好！）

的Chrome/Safari瀏覽器火狐VS縮放圖像的位置： Firefox scaling | Chrome/Safari Scaling

.designFold { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    justify-content: space-around; 
 
    -webkit-justify-content: space-around; 
 
    width: 100%; 
 
    margin:0 auto 1% auto; } 
 

 

 
.spacer { 
 
    flex:0 1 auto; 
 
    -webkit-flex:0 1 auto; 
 
    margin: 0 2%; } 
 
    
 
    
 
.b-sqr { 
 
    flex:0 1 auto; 
 
    -webkit-flex:0 1 auto; 
 
    -moz-flex:0 1 auto; 
 
    width:100%; 
 
    height:auto; 
 
    border: 1px Solid #ccc; 
 
    box-shadow: 8px 8px 7px #f2f2f2; } 
 

 

 
.b-rnd { 
 
    flex:0 1 auto; 
 
    -webkit-flex:0 1 auto; 
 
    -moz-flex:0 1 auto; 
 
    width:100%; 
 
    height:auto; 
 
    border: 1px Solid #ccc; 
 
    border-radius: 25px; 
 
    box-shadow: 8px 8px 7px #f2f2f2; }

<div class="designFold"> 
 
     <div class="spacer"><img class="b-sqr" src="cards/A1-C.jpg"></div> 
 
     <div class="spacer"><img class="b-sqr" src="cards/A1-O.jpg"></div> 
 
</div>

Answer 1

嘗試使用https://modernizr.com/ - 它所做的是用標準化的瀏覽器CSS3和HTML5的區別。許多開發者都使用它。