布局中断和关闭：FireFox和Chrome / Edge之间的图像定位不同

Question

概述了许多微小图像各种尺寸（第一张图像合二为一，二合一，其余所有其余三张图片每行布局）所有作品都在FireFox中精美排序：整洁布局三行跨度中间的第二张图像。

但后来我在Chrome和MS Edge中对它进行了测试，结果却发现布局到处都是（见图片）。基本代码为JSFIDDLE Demo。

logo3 :nth-child(2) img{margin: 0 auto}
logo3 :last-child   img{float:  right}

1. FireFox和Chrome / Edge之间的渲染引擎背后的原因是什么？

2. 如何在仅CSS中修复此问题，因此Edge / Chrome的工作方式与FireFox相同？谢谢！

左： FireFox v54。右： Chrome v59。全部在Windows 10机器上。看中间栏！


左： Chrome v59。右：Microsoft Edge v38。这两个看起来完全相同

Answer 1

我已经使用Chrome 59.0.3071.115，Firefox 54.0.1和Edge 40.15063.0.0对此进行了测试。他们看起来很相似。

编辑：logo1 a, logo2 a, logo3 a { flex: 1; }已添加。

＆＃13;

＆＃13;

body {
  width: 300px
}

logo1,
logo2,
logo3 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

logo1 a,
logo2 a,
logo3 a {
  flex: 1;
}

logo1 img,
logo2 img,
logo3 img {
  width: 100%;
  display: block;
  outline: 1px solid #000;
}

logo1 img {
  width: 100%;
  margin: 10px 0
}

logo2 img {
  width: 95%;
  margin: 10px 0
}

logo2 :last-child img {
  float: right
}

logo3 img {
  width: 90%;
  margin: 10px 0
}

logo3 :nth-child(2) img {
  margin: 0 auto
}

logo3 :last-child img {
  float: right
}

＆＃13;

<logo1>
  <a href="#"><img src="https://hubspotleiden.nl/media/uploads/partners/gemeente-leiden.png" /></a>
</logo1>

<logo2>
  <a href="#"><img src="https://www.aanmelder.nl/resources/img/references/Universiteit%20Leiden.png" /></a>
  <a href="#"><img src="https://hartlongcentrum.nl/themes/hartlongcentrum/images/lumc_logo.png" /></a>
</logo2>

<logo3>
  <a href="#"><img src="http://www.begrotingzuidholland.nl/assets/img/logo.png" /></a>
  <a href="#"><img src="https://www.fryslan.frl/templates/images/flex-v9/logo.png" /></a>
  <a href="#"><img src="https://www.fryslan.frl/plaat.php?fileid=13276&f=d84cea4401ac79c2f1fee09119068905413ea0bf339c69a0477f2f531c96c7e6fdbcff8b99f4eb9b4d3b491af4ea91fe2fa0cc18fbcf450f49de23164166e7f5" /></a>
</logo3>

<logo3>
  <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/2000px-IBM_logo.svg.png" /></a>
  <a href="#"><img src="http://www.magnus.nl/wp-content/uploads/2012/10/Sandd.png" /></a>
  <a href="#"><img src="https://static.thuisbezorgd.nl/images/restaurants/nl/3OQ3P/logo_465x320.png" /></a>
</logo3>

<logo3>
  <a href="#"><img src="http://www.kringloopwarenhuis.nl/images/Piezo_logo.png" /></a>
  <a href="#"><img src="https://static.thuisbezorgd.nl/images/restaurants/nl/30R5151/logo_465x320.png" /></a>
  <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f3/LIFF_zonder_datum.png" /></a>
</logo3>

<logo3>
  <a href="#"><img src="http://www.clcvecta.nl/content/user/1/images/voorstellen-homepage/Logo%20RAI%20Amsterdam.png" /></a>
  <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/LG_logo_%282015%29.svg/800px-LG_logo_%282015%29.svg.png" /></a>
  <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Christen_Democratisch_App%C3%A8l_%28nl%29_Logo.svg/1024px-Christen_Democratisch_App%C3%A8l_%28nl%29_Logo.svg.png" /></a>
</logo3>

＆＃13;

＆＃13;

＆＃13;