CSSコミュのボーダーの競合

ボーダーの競合で困った事があるので質問をさせてください。
タブ上のナビゲーションを作成しています。
選択しているタブがIE、Operaだと正常に表示されるのですが、Firefoxだと上手く表示されません。

【HTML】
<ul id="nav">
<li class="sele">Blogの基本説明</li>
<li>Blogの持つ機能</li>
<li>CMSという仕組み</li>
<li>RSSの利用</li></ul>

<ul id="menu">
<li>はじめに</li>
<li>Blogの基本説明</li>
</ul>

【CSS】
ul#menu{
margin:0px;
padding: 5px;
}

ul#nav li{
display:inline;
list-style-type:none;
padding: 5px;
margin-right: 10px;
margin-left: 10px;
border-top-width: 2px;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #58869D;
border-right-color: #58869D;
border-left-color: #58869D;
}

ul#nav li.sele{
display:inline;
list-style-type:none;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-top-color: #58869D;
border-right-color: #58869D;
border-bottom-color: #FFFFFF;
border-left-color: #58869D;
}

ul#menu li{
display:inline;
list-style-type:none;
border-right-width: 2px;
border-right-style: dotted;
border-right-color: #58869D;
font-size: 12px;
padding: 5px;
}

ul#nav{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #58869D;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}

ソースが長くなって申し訳ありません。
選択されているタブ（seleです）のボーダー下を、白で潰しているのですが、Firefoxだと、ボーダーが微妙にずれてしまいます。
他のタブ部分も微妙にずれているので、これが原因かもしれないと思っているのですが、何処が原因なのか・・・・

どうかアドバイスをお願いします。

コメント(2)

最初
全て
最新の40件

[1] mixiユーザー 12月24日 19:28

何度か試しましたが、確かに Firefox だけ、ボーダーが 1px ズレますね。

これの根本的な解決にはなりませんが、別解を書いておきます。

ul#nav {
display: block;
width: auto;
height: 100%; /* for IE */
margin: 10px 0;
padding: 0;
border-bottom: 2px solid #58869d;
}

* > ul#nav { /* for Opera, Firefox, and more... */
height: auto;
}

ul#nav:after {
content: "";
display: block;
height: 0px;
clear: both;
}

ul#nav li {
position: relative; /* for Border duplication */
top: 2px;
left:0;
display: block;
width: auto;
float: left;
list-style-type: none;
padding: 5px;
margin: 10px 10px 0;
border-width: 2px;
border-style: solid;
border-color: #58869d;
}

ul#nav li.sele {
border-bottom-color: #fff;
}

ul#menu {
margin: 0;
padding: 5px;
clear: both;
}

ul#menu li {
display: inline;
list-style-type: none;
border-right-width: 2px;
border-right-style: dotted;
border-right-color: #58869D;
font-size: 12px;
padding: 5px;
}

私が以前にやってた物ですけど。

1px ズレる解決方法はさっぱりです。偉い人待ちという事で…。

[2] mixiユーザー 12月24日 21:42

ありがとうございます。
コピペさせて貰い解決しました。

:after要素を含むheightの周りが分かりませんが、後々ゆっくり考えてみます；
やっぱりFirefoxのバグなんですかね・・・・困った物です。

ログインすると、みんなのコメントがもっと見れるよ