0

左右に浮かぶリンクを持つかなり単純なナビゲーション バーを作成しています。ミックスには検索フィールドもあり、li タグの内部には、含まれている場合、次の li タグを垂直方向に数ピクセル下にオフセットします (測定しないとわかりにくいかもしれませんが、取得すると非常に明確になります)ナビゲーション バーの一番下の行に対するホバー スタイル)。Chrome (30.0.1599.101) では発生しますが、Safari では発生しません。

誰でも助けたり、修正を提案したりできますか?

ログインは、Chrome で数ピクセル押し下げられます。

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;
}
4

1 に答える 1

2

のマージンとパディング<input>です。

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

補足として、検索ボックスを<li>.

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

于 2013-11-13T02:50:47.110 に答える