CSS Firefox 问题：在调整大小时保持 Flexbox 内不同宽度的并排 div 的相对大小

Question

我正在使用 Flexbox（封闭的封面靠近开放的内部）创建一个包含不同尺寸和方向的卡片的图片库。最近的 Chrome 和 Safari 可以很好地调整/缩小不同宽度图像的并排 div，在浏览器窗口缩小时尊重/保持两个 div 的相对大小。 Firefox 达到了极限，开始更激进地收缩更宽的 div/img，导致 2 个 div 有 2 个不同的高度，破坏了原有的布局关系。

是否有针对此问题的 CSS 解决方案，而无需针对每个独特的 div 大小差异使用具有不同百分比的多个 div 或使用 @media 调用。寻找一种优雅的解决方案（单个 div 包装器），它可以缩放/缩小两个并排的 div，同时保持相对高度或宽度，无论 div 内放置什么尺寸的卡片。

我并排尝试了 2% 的 div，效果很好，符合预期。但该解决方案将需要创建一堆单独的 CSS div 以满足 Firefox。

在下面的 jpg 示例中，折叠卡和平板卡的封面图像是相同的文件。唯一的区别是底部平面卡有 css 圆角。显然问题在于折叠卡示例的两种不同宽度。

如果这是唯一的补救措施，我将使用 .js 解决方案。但我目前的 .js 技能处于“剪切、粘贴和中断”级别。 （我的 css 技能可能只是稍微好一点！）

Chrome/Safari vs Firefox 缩放图片： 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 与浏览器的差异。许多开发者都在使用它。