いくつかのJquery効果を使用してメニューを作成しましたが、Firefoxを除くすべてのブラウザーで正常に機能しています（最後のメニュー項目は中央に配置されていません）。なぜこれが発生するのかわかりません... Firefoxでは次のようになります：http：/ /robertpeic.com/future%20net/problem/problem.png 他のブラウザではうまくレンダリングされます：http：//robertpeic.com/future%20net/problem/other.png
これを解決するために私は試しました：固定の幅と高さを追加しました私の最後のアンカータグ（fail）に、パディングの代わりにマージンを追加しようとしました（fail）、CSSを介してFirefoxハックを使用しようとしましたが、CSS検証が壊れました（fail）、パディングを少し増やしてみましたが、 Firefoxですが、他のすべてのブラウザで壊れています（失敗）。
私の最後の手段はブラウザスニッフィングを使用することですが、このような小さな問題にはこれを使用したくありません。
誰かが私がこの問題を解決するのを手伝ってもらえますか？
ここにフィドルの例
CSSコード：
.menu{
position:relative;
display:block;
margin:0px auto;
height:37px;
background:url(http://robertpeic.com/future%20net/template%20images/menu-bg.png);
width:959px;
}
.menu ul{
list-style-type:none;
display:block;
width:990px;
margin:0 auto;
}
.menu ul li a{
float:left;
color:#4e4e4e;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
display:table-cell;
position:relative;
height:37px;
text-decoration:none;
background:url(http://robertpeic.com/future%20net/template%20images/main-menu-divider.png) 100% 0%;
background-repeat:no-repeat;
z-index:100;
padding:0px 18px 0px 18px;
line-height:37px;
text-align:left;
margin-left:2px;
}
.menu ul li a:hover{
float:left;
color:#780C71;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
display:table-cell;
position:relative;
height:37px;
text-decoration:none;
background:url(http://robertpeic.com/future%20net/template%20images/main-menu-divider.png) 100% 0%;
background-repeat:no-repeat;
z-index:100;
padding:0px 18px 0px 18px;
line-height:38px;
text-align:center;
margin-left:2px;
}
.mainhover{
background-color:#BFC0C1;
z-index:50;
position:absolute;
border-radius:5px;
moz-border-radius:5px;
border-top: 1px solid #A09F9F;
border-left: 1px solid #B5B3B3;
border-right: 1px solid #EFEFEF;
border-bottom: 1px solid #EDEDED;
}
.remove{
background-color:#C4C3C2;
z-index:50;
position:absolute;
border-radius:5px;
moz-border-radius:5px;
border-top: 1px solid #A09F9F;
border-left: 1px solid #B5B3B3;
border-right: 1px solid #EFEFEF;
border-bottom: 1px solid #EDEDED;
}
.menu ul li a.contact{
background-image:none;
padding:0px 30px 0px 23px;
text-align:center;
margin-left:6px;
}
Jqueryコード：
$(document).ready(function(){
var manageWidth = 14;
var manageHeight = 10;
var manageMargin = 6;
$('.menu ul li a').hover(function(){
var getHeight = $(this).outerHeight(true);
var getWidth = $(this).outerWidth(true);
$('<span class="mainhover" />').insertAfter($(this));
$('.menu ul li .mainhover').css({'width':getWidth-manageWidth,'height':getHeight-manageHeight,'margin-top':'4px','margin-left':-getWidth+manageMargin ,'opacity':'0'});
$('.menu ul li .mainhover').stop().animate({opacity:1},700);
//alert(getWidth);
},function(){
$('.menu ul li a').next().removeClass('mainhover').addClass('remove').stop().animate({opacity:0},700,function(){
$(this).remove();
});
});
});