Question

我创建了一个带有一些Jquery效果的菜单，除了Firefox（我的最后一个菜单项不居中）之外，它在所有浏览器中运行良好，我不知道为什么会发生这种情况...... 它在Firefox中看起来像这样：http://robertpeic.com/future%20net/problem/problem.png在其他浏览器中它渲染得很好：http://robertpeic.com/future%20net/problem/other.png
为了解决这个问题，我尝试过：为我的上一个锚标记添加了固定的宽度和高度（失败），尝试添加边距而不是填充（失败），试图通过CSS使用Firefox黑客工作但打破了我的CSS验证（失败），尝试增加一点点填充，它在Firefox中看起来很好但在其他所有浏览器中都被打破了（ 失败的的）。

我的最后一招是使用浏览器嗅探，但我真的不想使用这个来解决这么小的问题。
有人可以帮我解决这个问题吗？
FIDDLE EXAMPLE HERE

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();
});

});

    });

Answer 1

我建议你不要使用span，使用div元素来修复它。或者您可以尝试添加'text-align：center;'父母和'text-align：left'给孩子。祝你好运

Answer 2

我认为问题是因为.menu ul的宽度为990px，只需使用100％;

无法将我的跨度集中在firefox中

2 个答案: