布局损坏且偏离方向：FireFox 和 Chrome/Edge 之间的图像定位不同

Question

在许多小图像的概述中 大小不一 （第一张图像，第二张图像，第二张图像，每行布局中的三张图像）所有作品都精美地排列在FireFox：布局整洁，第二张图片位于三行跨度的中间。

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

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

FireFox 和 Chrome/Edge 之间的渲染引擎差异背后的原因是什么？
如何仅在 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; } 添加。

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
}

<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>

布局损坏且偏离方向：FireFox 和 Chrome/Edge 之间的图像定位不同

Layout broken and way off: image positioning differs between FireFox and Chrome/Edge

css

firefox

google-chrome

cross-browser

flexbox