html - Chrome float 问题

Question

我在处理新设计时遇到问题。 Check it out here on CodePen .当我缩小窗口并将其重新打开时，右侧的导航变得一团糟。不过，它只在 Chrome 和 Opera 中这样做。在 IE 11 和 FireFox 中完美运行。如果我打开检查元素并取消选中并重新选中 float:left;复选框，它纠正了这个问题。是什么导致了这个问题？如果我忽略了一些愚蠢的事情，我不会感到惊讶。

/*tags*******************************************************/

html,
body {
  background-color: #111;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
a {
  color: #FFF200;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
#headerprofile #pic {
  display: inline-block;
  height: 56px;
  margin-top: 27px;
}
#headerprofile img {
  border: 1px solid #ecf0f1;
  border-radius: 5px;
  max-height: 100%;
}
#headerprofile #profnav {
  display: inline-block;
  float: left;
  margin-right: 32px;
}
#headerprofile #profnav a {
  color: #fff;
  margin-left: 30px;
}
#headerprofile #profnav a:first-child {
  margin-left: 0px;
  margin-left: initial;
}
#navigation a {
  display: inline-block;
  padding: 8px;
  color: #ecf0f1;
}
#navigation a:hover {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  color: #010107;
  text-decoration: none;
}
#navigation ul li {
  display: inline;
}
/*IDs********************************************************/

#firstrow {
  height: 112px;
  position: relative;
}
#headerContainer {
  background-color: #180153;
  background-color: #c0392b;
  padding-bottom: 15px;
  padding-top: 15px;
}
#headerprofile {
  float: right;
  line-height: 112px;
  max-height: 100%;
}
#logo {
  float: left;
  position: relative;
  height: 100%;
}
#logo #logovector {
  width: 250px;
}
#logo #logovector #logoOutline {
  fill: #ecf0f1;
}
#logo #logovector .outlinetext {
  fill: #ecf0f1;
}
#navigation {
  background-color: #2c3e50;
  font-size: 20px;
  margin-top: 6px;
  text-align: center;
  padding-bottom: 20px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 5px;
}
/*classes****************************************************/

.columnize {
  margin: auto;
  width: 80%;
}
.columnize.full {
  width: 97%;
  width: calc(100% - 50px);
}
.center {
  text-align: center;
}
.content {
  margin-top: 25px;
  line-height: 30px;
}
.displayNone {
  display: none;
}
.zigzag {
  -webkit-filter: drop-shadow(rgba(255, 255, 255, .3) 0px -3px 0px);
  position: relative;
  width: 100%;
}
.zigzag:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  width: 100%;
  height: 20px;
}
.zigzag.first:before {
  background: linear-gradient(45deg, transparent 33.333%, #2c3e50 33.333%, #2c3e50 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #2c3e50 33.333%, #2c3e50 66.667%, transparent 66.667%);
  background-size: 20px 40px;
}
.zigzag.second:before {
  background: linear-gradient(45deg, transparent 33.333%, #111 33.333%, #111 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #111 33.333%, #111 66.667%, transparent 66.667%);
  background-size: 20px 40px;
}
@media screen and (max-width: 680px) {
  #headerprofile #pic {
    /*loat:none;*/
    clear: both;
    display: block;
    text-align: center;
    margin-top: 0px;
    margin-top: initial;
  }
  #headerprofile #profnav {
    float: none;
    clear: both;
    display: block;
    margin-right: 0px;
    margin-right: initial;
    text-align: center;
  }
  #firstrow {
    height: auto;
  }
  #headerprofile {
    line-height: 60px;
  }
  #logo {
    float: none;
  }
  #logo #logovector {
    display: block;
    margin: auto;
    max-width: 385px;
    width: 100%;
    width: calc(100% - 10px);
  }
  #headerprofile {
    float: none;
  }
}
.formContainer h1 {
  margin-bottom: 25px;
  margin-top: 25px;
}
form input.textinput {
  position: relative;
  padding: 5px 10px;
  margin: 2px;
  font-size: 13px;
  background-color: #222;
  background-color: rgba(0, 0, 0, 0);
  font-weight: bold;
  border: 2px solid #fff;
  border: 2px solid rgba(255, 255, 255, .8);
  cursor: pointer;
  color: #fff;
  -webkit-user-select: none;
}
.login.formContainer form {
  background-color: #2c3e50;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: auto;
}
.login.formContainer form h3 {
  margin-bottom: 10px;
}
.login.formContainer form input.textinput {
  width: 254px;
  width: calc(100% - 30px);
}
.login.formContainer form input#signemail {
  width: 151px;
  width: calc(100% - 129px);
}
.login.formContainer form input.textinput:hover,
.login.formContainer form input.textinput:focus {
  border: 2px solid #fff;
  border: 2px solid rgba(255, 255, 255, 1);
}
.login.formContainer form .formbtns {
  margin-top: 10px;
}
.login.formContainer {
  width: 300px;
  margin: auto;
}
/*...................................*/

/*...........button stuff............*/

/*...................................*/

.button {
  position: relative;
  padding: 5px 10px;
  margin: 2px;
  font-size: 13px;
  background-color: rgba(255, 255, 255, 0);
  font-weight: bold;
  border: 2px solid;
  cursor: pointer;
  -webkit-user-select: none;
}
.button.white {
  color: #fff;
  border-color: #fff;
}
.button.white:hover {
  background-color: #fff;
  color: #000;
}
.button.emerald {
  color: #2ecc71;
  border-color: #2ecc71;
}
.button.emerald:hover {
  background-color: #2ecc71;
  color: #fff;
}
.button.springgreen {
  color: #00FF7F;
  border-color: #00FF7F;
}
.button.springgreen:hover {
  background-color: #00FF7F;
  color: #fff;
}
.button.sky {
  color: #33ccff;
  border-color: #33ccff;
}
.button.sky:hover {
  background-color: #33ccff;
  color: #fff;
}
.button.orangered {
  color: #FF4500;
  border-color: #FF4500;
}
.button.orangered:hover {
  background-color: #FF4500;
  color: #fff;
}
.button.cyan {
  color: #2980b9;
  border-color: #2980b9;
}
.button.cyan:hover {
  background-color: #2980b9;
  color: #fff;
}
.button.purple {
  color: #8e44ad;
  border-color: #8e44ad;
}
.button.purple:hover {
  background-color: #8e44ad;
  color: #fff;
}

<div id="headerContainer">
  <div class="columnize full">
    <div id="firstrow">
      <div id="logo">
        <h1>Logo</h1>
      </div>
      <!--logo-->
      <div id="headerprofile">
        <div>
          <div id="pic">
            <img src="http://placekitten.com/g/200/200" />
          </div>
          <div id="profnav"><a href="#">Log Out</a><a href="#">Settings</a><a href="#">USERNAME</a>
          </div>
        </div>
      </div>
      <!--#headerprofile-->
    </div>
    <!--#firstrow-->
  </div>
  <!--.columnize.full-->
</div>
<!--#headerContainer-->
<div class="first zigzag">
</div>
<!--.zigzag-->
<nav role="navigation">
  <div id="navigation">
    <ul>
      <li><a href="#" hreflang="en">Home</a>
      </li>
    </ul>
  </div>
  <!--#navigation-->
</nav>
<div class="second zigzag">
</div>
<!--.zigzag-->
<div class="columnize content">
  <h1>Settings</h1>
  <form id="settingsform" action="#" method="post">
    <h3>Make changes to your account</h3>
    <label class="displayNone" for="usersname">Name</label>
    <input id="usersname" type="text" class="textinput" name="name" placeholder="Name" required="required" title="Real first name, maybe a last initial" />
    <br/>
    <label class="displayNone" for="usersusername">Username</label>
    <input id="usersusername" type="text" class="textinput" name="username" placeholder="Username" required="required" title="Your SSB tag" />
    <br/>
    <label class="displayNone" for="userspass">Password</label>
    <input id="userspass" type="password" class="textinput" name="password" placeholder="Password" required="required" title="A unique password" />
    <br/>
    <div class="formbtns">
      <input class="button emerald" type="submit" id="save" value="Save" name="submit" />
    </div>
  </form>
</div>
</body>

谢谢。

Answer 1

将 text-align: center; 添加到 #firstrow 并将 display: inline-block; 添加到 #headerprofile

DEMO

#firstrow {
    height: auto;
    text-align: center;
}
#headerprofile {
    line-height: 60px;
    display: inline-block;
}