タブ式グローバルナビのブラウザ崩れの件で

質問

はじめまして、タブ形式のグローバルナビを作成しており、以下スタイルシートを適用しております。
IE7.6だとタブを触った時にcurrent_page_item aの該当ページが背景色緑なのですが、その下に1ピクセルの隙間が生じてしまいます。
添付ご参照ください。
FireFOXだと大丈夫なのです。
ブラウザの崩れなので、どの様に修正すればよいか不明です。
どなたか教えてください。
宜しくお願い致します。
----html-------
<ul id="nav">
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ACCESS</a></li>
</ul>
-----------

---------css-----------
#nav {
background-color: #ffffff;
margin: 0;
padding: 0;
list-style-type: none;
height: 2em;
width: 800px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00645C;
}
#nav li {
text-align: center;
float: left;
line-height: 2em;
}
#nav li a {
display: block;
width: 100px;
text-decoration: none;
color: #333333;
}
#nav li a:hover {
display: block;
width: 100px;
color: #00645C;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #00645C;
border-right-color: #00645C;
border-left-color: #00645C;
}
#nav .current_page_item a {
color: #FFFFFF;
background-color: #00645C;
}

回答No.1

noname#83877 · ベストアンサー

#nav li a {
display: block;
width: 100px;
text-decoration: none;
color: #333333;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
#nav li a:hover {
display: block;
width: 100px;
color: #00645C;
border-top-color: #00645C;
border-right-color: #00645C;
border-left-color: #00645C;
}
#nav .current_page_item a {
color: #FFFFFF;
background-color: #00645C;
border-top-color: #00645C;
border-right-color: #00645C;
border-left-color: #00645C;
}

この部分を置き換えてみてください。
最初から白いボーダーを表示することでレイアウトの崩れを防ぎます。

お礼

ありがとうございました！
正常に反映できました！