html - Chrome 中的 float div 定位错误

Question

我正在编写一个相当简单的导航栏，其中包含左右浮动的链接。混合中还有一个搜索字段，在一个 li 标签内，当包含该标签时，它会将下一个 li 标签垂直向下偏移几个像素(除非您测量，否则可能很难看到，但当它获得一个标签时，它会变得非常明显悬停样式在导航栏的底线)。它发生在 Chrome (30.0.1599.101) 中，但不是 Safari。

任何人都可以提供帮助或提出修复建议吗？

http://jsfiddle.net/dzSAT/14/

<section id="topnav">
  <div class="navcontainer">
    <nav id="topnav-main">
      <ul>
        <li><a href="/" class="home activelink">Home</a></li>
        <li><a href="/about" class=" ">About</a></li>
      </ul>
    </nav>
    <nav id="topnav-account">
      <ul>
         <li class="searchbar">
          <input type="text" value="Search" />
        </li>
        <li><a href="login" class="store login">Login</a></li>
      </ul>
    </nav>
  </div>
</section>

section#topnav {
  width: 100%;
  height: 4.1875rem;
  position: fixed;
  top: 0;
  z-index: 99;
}
section#topnav .navcontainer {
  width: 25rem;
  margin: 0 auto;
  position: relative;
  top: 1.6875rem;
}
section#topnav nav {
  float: left;
}
section#topnav nav ul {
  margin: 0;
  padding: 0;
}
section#topnav nav ul li {
  display: inline;
  margin-right: 2.1875rem;
}
section#topnav nav ul li a {
  padding-bottom: 1.1875rem;
}
section#topnav ul li.searchbar {
  margin-left: 0;
}
section#topnav ul li.searchbar input {
  width: 4rem;
}
section#topnav nav#topnav-account {
  float: right;
}
section#topnav nav#topnav-account li {
  display: inline;
  margin-right: 0;
  margin-left: 2.1875rem;
  position: relative;
  top: -1px;
}
section#topnav {
  border-bottom: 1px solid #968c83;
  background-color: white;
}
section#topnav nav ul li a {
  color: #968c83;
}
section#topnav nav ul li a:link {
  border-bottom: 5px solid rgba(255, 255, 255, 0);
}
section#topnav nav ul li a:hover, section#topnav nav ul li a.activelink {
  border-bottom: 5px solid #968c83;
}

section#topnav nav ul li.searchbar {
  color: #968c83;
}
section#topnav nav ul li.searchbar input {
  color: #968c83;
}

section#topnav {
  font-size: 0.875rem;
}
section#topnav ul {
  list-style-type: none;
}
section#topnav ul li a {
  text-decoration: none;
}

Answer 1

这是 <input> 上的边距和填充.

section#topnav nav ul li.searchbar input {
  color: #968c83;
  margin: 0;
  padding: 0;
}

作为旁注，虽然我认为您的搜索框不应该位于 <li> 内.

http://jsfiddle.net/dzSAT/16/