jquery对齐菜单和徽标不适用于safari

Question

我在将网站徽标与屏幕中心对齐并且菜单显示在两侧时遇到问题。从朋友给我的推荐我使用css，jQuery和html的混合来实现这一目标。这个世界伟大的火狐和铬，但在野生动物园的对齐完全不正确。这是代码：

jQuery的：

$('#logo').css('margin-left', '-'+($('#logo').width()/2)+'px');
$('.header .menu .container .left-side-menu').css('padding-right',($('#logo').width()/2)+60+'px');
$('.header .menu .container .right-side-menu').css('padding-left',($('#logo').width()/2)+60+'px');

HTML：

<h1><a href="<?php echo $url; ?>"><img id="logo" src="<?php echo     $logo['magethemes_zen_theme_logo']; ?>" title="<?php echo $name_bloginfo; ?>"     alt="<?php echo $name_bloginfo; ?> logo" /></a></h1>

CSS：

#logo {
position: absolute;
top: 0;
left: 50%;
z-index: 10;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
#logo:hover {
  top: -6px; }
  @media all and (max-width: 680px) {
    #logo:hover {
      top: 0; } }
#logo a {
  display: block; }

顺便说一句。我在这个网站上使用Wordpress，因此使用标准的Wordpress codex显示菜单。

以下是chrome（工作）的样子：

这是safari的样子（不工作）：