这是一个JSFiddle of the layout.我看过.showcase元素的样式和Firefox和Chrome控制台中的一个.icon元素，我看不出任何差异。然而，两行小型.icon盒之间的差距在两种浏览器中都是不同的。我暂时只能以320 x 480的分辨率工作。我知道截图中的窗口不完全相同，但是当它们都是320 x 480px时就是这种情况。
如果有人知道原因我会很感激帮助！
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of CSS Reset*/
body, html {
height : 100%;
}
.heading-wrapper {
height : 10%;
text-align : center;
font-size : 12px;
}
.non-heading-wrapper {
display : flex;
flex-flow : row nowrap;
align-items : center;
height : 90%;
width : 100%;
}
.icon-select-outer {
display : flex;
flex-flow : row nowrap;
height : 95%;
width : 95%;
margin : 0 17px 17px;
background-color : yellow;
}
.icon-select-inner {
display : flex;
flex-flow : column nowrap;
justify-content : space-between;
margin : 0 17px 17px;
height : calc(100% - 17px);
width : 100%;
}
.select-text {
text-align : center;
height : 10%;
font-size : 12px;
}
.icon-preview {
height : 40%;
width : 100%;
background-color :blue;
}
.icon-showcase {
display : flex;
flex-flow : row wrap;
justify-content : space-between;
align-items : flex-start;
height : auto;
max-height : 200px;
width : 100%;
}
.icon {
margin : 2%;
flex : 0 1 20%;
display : block;
min-width : 0;
max-width : 25%;
min-height : 0;
height : auto;
object-fit : contain;
}
.left-edge {
margin-left : 0;
}
.right-edge {
margin-right : 0;
}
.confirm-btn {
height : 15%;
}<!DOCTYPE html>
<html>
<head>
<title>Brad's Tic Tac Toe</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" type="text/css" href="screen1-2.css">
<!--<script src="https://use.fontawesome.com/dee45a8958.js" > </script>-->
<script type="text/javascript" src="screen1.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="heading-wrapper">
<h1>MAIN TITLE</h1>
</div>
<div class="non-heading-wrapper">
<div class="icon-select-outer">
<div class="icon-select-inner">
<div class="select-text">
<h2>SELECT YOUR ICON</h2>
</div>
<div class="icon-preview"></div>
<div class="icon-showcase">
<img class="icon left-edge" src="http://via.placeholder.com/100x100">
<img class="icon" src="http://via.placeholder.com/100x100">
<img class="icon" src="http://via.placeholder.com/100x100">
<img class="icon right-edge" src="http://via.placeholder.com/100x100">
<img class="icon left-edge" src="http://via.placeholder.com/100x100">
<img class="icon" src="http://via.placeholder.com/100x100">
<img class="icon" src="http://via.placeholder.com/100x100">
<img class="icon right-edge" src="http://via.placeholder.com/100x100">
</div>
<button class="confirm-btn">CONFIRM</button>
</div>
</div>
</div>
</body>
</html>