2

私がやっていること: ボタンにカーソルを合わせると、5px のボーダーボトムを追加しています。

JS フィドル: http://jsfiddle.net/mUCNB/

問題：

問題は、境界線の下部が左側と右側の両方で 1 ピクセル伸びすぎていることです。

ここに画像の説明を入力

質問：

これを修正する方法を知っている人はいますか？

関連コード:

#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}

#main-nav li a:nth-child(3) {
width: 225px;
}

#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}

#main-nav  a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}
4

3 に答える 3

3

CSS はエッジで「留め継ぎ」を行うため、その現象に気付くでしょう。これを回避するために、ホバーしているliBEHINDを強調表示するルールを作成しました。aこれにより、下部にきれいな境界線が表示されるという効果が生まれます。要素間の白いセパレーターも保持できます。

フォークフィドル

CSS

* {
  margin: 0px;
  padding: 0px;
  outline: none;
}

#header {
  background-color: #00a0c8;
  min-height: 118px;
}

#headerContent {
  width: 980px;
  min-height: 118px;
  margin: 0 auto;
  background-color: #00a0c8;
}

nav {
  width: 980px;
  margin: 0 auto;
}

nav li {
  border-left: 1px solid #fff; /* Added border to nav li */
  display: block;
  float: left;
  height: 50px; /* Give it height */
}

#main-nav li:hover {
  background: #0BC6F5; /* Give background color to li on hover */
}

nav li:first-child {
  border-left: none;
}

#main-nav li a {
  display: block;
  padding-top: 15px;
  text-align: center;
  height: 35px;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
  text-decoration: none;
  background-color: #00a0c8;
}

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
  width: 224px;
}

#main-nav li a:nth-child(3) {
  width: 225px;
}

#main-nav li a:last-child {
  width: 224px;
}

#main-nav li a:hover {
  height: 30px;
}

それが役立つことを願っています。

于 2013-08-20T02:14:03.077 に答える
1

以下から border-left および border-right スタイルを削除することで、この問題を解決できます。

更新されたCSS:

#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}

#main-nav li a:last-child {
width: 224px;
}

更新されたフィドル

于 2013-08-20T02:07:25.500 に答える
1

また、代わりに box-shadow を使用して、競合する境界線を適用するという巧妙なトリックもあります。

#main-nav  a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}

これは、現在のホバーセレクターを置き換えるだけで機能します!

最初に試してみたい場合は、別のフィドルがあります: http://jsfiddle.net/4zzMA/

于 2013-08-20T02:33:36.940 に答える