徽标不在Firefox中，而是在Chrome中

Question

这是我的网站：LINK

正如您所看到的，我的Logo被推到火狐的右侧，但是它应该是居中的。例如，在Chrome中工作得很好。

我尝试过只寻找火狐样式表，但我没有找到正确的CSS设置，从而使这一工作正确。

下面是包装在一个名为id container 的中的相关HTML代码，到目前为止：

<div id="nav">
  <ul id="index_cards">
    <li id="card-1">
        <h3><strong>Home</strong></h3>
    </li>
    <li id="card-2">
        <h3><strong>About/Contact</strong></h3>
    </li>
    <li id="card-4">
        <h3><strong>Portfolio</strong></h3>
    </li>
    <li id="card-5">
        <h3><strong>Services</strong></h3>
    </li>
  </ul>
</div>


<div id="header">
  <div id="logo">
    <img src="imgs/logo.png" name="ielogo" width="457" height="223" id="ielogo" />
  </div>
</div>

CSS:

#container {
  top:-73px;
  margin-top:-70px;
  min-height:100%;
  position:relative;
  display:block;
}

#header {
  margin-top:-30px;
  height:250px;
  background-image:url(../imgs/header-top.png);
  background-repeat:repeat-x;
  padding:10px;
}

#logo {
  margin:0 auto;
  width:457px;
  height:223px;
}

Answer 1

问题在于图像，将其放入css中。

#logo img { display: block; }

http://jsbin.com/afuquq/3/

Answer 2

修改后的答案：，解决方案是将logo合并到navigation部分，和都把#header放在了position:absolute;的网页上。

HTML片段：

<div id="header"></div>

     <div id="container">

       <div id="nav">

          <ul id="index_cards">
             <li id="card-1">
                 <h3><strong>Home</strong></h3>

             </li>
             <li id="card-2">
                 <h3><strong>About/Contact</strong></h3>

             </li>
             <li id="card-4">
                 <h3><strong>Portfolio</strong></h3>

             </li>
             <li id="card-5">
                 <h3><strong>Services</strong></h3>

             </li>
          </ul>

          <div id="logo"></div>

       </div>

     <!-- continued-->

     </div>

CSS:

/* This section is modified */
#header {
    background-image:url(http://tubebackgrounds.co.uk/portfolio/imgs/header-top.png);
    background-repeat:repeat-x;
    position: absolute;
    width: 100%;
    height: 250px;
    margin-top: 40px;
}

/* This section is modified. */
#logo {
    background-image:url(http://tubebackgrounds.co.uk/portfolio/imgs/logo.png);
    background-repeat:no-repeat;
    margin:0 auto;
    width:457px;
    height:250px;
}

此外，还添加了应用于CSS选择器#body的额外margin-top: -20px;，以弥补那些字体未加载时的单独@font-face问题。尽管如此，字体集成仍然需要正确的处理。

注意:由于安全设置，下面的 jsFiddle不会呈现@font-face字体。

参考资料：jsFiddle

在地址栏中访问上述没有/show/ 的jsFiddle，以查看编辑页.