HTML5 - Chrome 44 - Flexbox中的文字无法正确对齐

Question

无法让我的代码在Chrome上正常显示（在Firefox 39和IE 8上运行正常）。我创建的flexbox中的文本在Chrome中奇怪地对齐。它证明左边的第一条线，中间的第二条线和右边的第三条线（而不是将它们放在彼此的顶部）。

＆＃13;

＆＃13;

header {background-color: #FFFFFF; font-family: Georgia; font-size: 3em; border: 1px solid white; margin: 0px; padding: 5px;}
nav {background-color: #FFFFFF; font-family: Veranda, sans-serif; border: 1px solid white; margin: 0px; padding: 8px; 0.9em; border-bottom:2px solid #000000;}
section {font-family: Veranda, sans-serif; margin: 0px; padding: 20px; font-size: 08.em;}
footer {background-color: #FFFFFF; font-family: Veranda, sans-serif; font-size: 0.7em; border: 1px solid white; margin: 0px; padding: 8px; border-top: 2px solid #000000;}

.main{background-image: url(BG-IMAGE GOES HERE); height: 255px; border-bottom: 2px solid #000000;}
.second{background-image: url();}

.smaller{font-size:65%;}

#flexbox{ 

display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;

display: -webkit-inline-flex;
-webkit-inline-flex-orient: horizontal;
-webkit-inline-flex-pack: center;
-webkit-inline-flex-align: center;

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;

display: -ms-flexbox;
-ms-flexbox-orient: horizontal;
-ms-flexbox-pack: center;
-ms-flexbox-align: center;

display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;

background-color: #FFFFFF;
border: 2px solid #000000;
padding: 20px;
font-family: Tahoma;
width: 50%;
font-size: 1.5em;
}

＆＃13;

<header>

<center>
<img height="125px" width="125px" src="logo1.png"><br>
TITLE
</center>

</header>

<nav>
<center>
<a class="one" href="LINK">HOME</a> | <a class="one" href="LINK">LINK</a> | <a class="one" href="LINK">LINK</a> | <a class="one" href="LINK">LINK</a> | <a class="one" href="CONTACT US">CONTACT US</a>
</center>
</nav>

<section class="main">

<center>
<br>

<div id="flexbox">

<br><i>&quot;TEXT GOES HERE AND HERE AND HERE AS WELL&quot;</i><br><br>
<p align="right"><span class="smaller">- Some Guy, <i>From This Thing</i></span></p>
<br>
MORE TEXT
</div>
<br><br>
</center>

</section>

＆＃13;

＆＃13;

＆＃13;

非常感谢任何帮助。

Answer 1

如果您选择文本，则表明这些框正在与中间对齐：因此您可能只需要调整第二个框上的填充边距并在第三个框之前删除br：

＆＃13;

＆＃13;

body{vertical-align:top;!important}
header {background-color: #FFFFFF; font-family: Georgia; font-size: 3em; border: 1px solid white; margin: 0px; padding: 5px;}
nav {background-color: #FFFFFF; font-family: Veranda, sans-serif; border: 1px solid white; margin: 0px; padding: 8px; 0.9em; border-bottom:2px solid #000000;}
section {font-family: Veranda, sans-serif; margin: 0px; padding: 20px; font-size: 08.em;}
footer {background-color: #FFFFFF; font-family: Veranda, sans-serif; font-size: 0.7em; border: 1px solid white; margin: 0px; padding: 8px; border-top: 2px solid #000000;}

.main{background-image: url(BG-IMAGE GOES HERE); height: 255px; border-bottom: 2px solid #000000;}
.second{background-image: url();}

.smaller{font-size:65%;}

#flexbox{ 

display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;

display: -webkit-inline-flex;
-webkit-inline-flex-orient: horizontal;
-webkit-inline-flex-pack: center;
-webkit-inline-flex-align: center;

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;

display: -ms-flexbox;
-ms-flexbox-orient: horizontal;
-ms-flexbox-pack: center;
-ms-flexbox-align: center;

display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;

background-color: #FFFFFF;
border: 2px solid #000000;
padding: 20px;
font-family: Tahoma;
width: 50%;
font-size: 1.5em;

}

＆＃13;

<header>

<center>
<img height="125px" width="125px" src="logo1.png"><br>
TITLE
</center>

</header>

<nav>
<center>
<a class="one" href="LINK">HOME</a> | <a class="one" href="LINK">LINK</a> | <a class="one" href="LINK">LINK</a> | <a class="one" href="LINK">LINK</a> | <a class="one" href="CONTACT US">CONTACT US</a>
</center>
</nav>

<section class="main">

<center>
<br>

<div id="flexbox">

<br><i>&quot;TEXT GOES HERE AND HERE AND HERE AS WELL&quot;</i><br><br>
<p align="right" style="-webkit-margin-before:0px"><span class="smaller">- Some Guy, <i>From This Thing</i></span><br><br></p>

MORE TEXT
</div>
<br><br>
</center>

</section>

＆＃13;

＆＃13;

＆＃13;