徽标不在 Firefox 中居中，但在 Chrome 中居中答案

【问题标题】：Logo does not center in Firefox but centers in Chrome徽标不在 Firefox 中居中，但在 Chrome 中居中
【发布时间】：2012-07-25 13:25:59
【问题描述】：

这是我的网站：LINK

如您所见，我的徽标在 Firefox 中被推到右侧，但它应该居中。例如，在 Chrome 中效果很好。

我曾尝试寻找仅适用于 Firefox 的样式表，但我真的找不到正确的 CSS 设置来使其正常工作。

以下是包含在 id 中的相关 HTML 代码，名称为 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>


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

【问题讨论】：

那么您的徽标实际上应该在哪里？我在 ff12 中看起来不错
我使用的是 FF12，它偏离了中心。 div id logo 的 CSS 看起来不错。我认为您只需要将 img html 替换为 css 即可。
那些在鼠标悬停时放大的图像真的很酷，因为它们是透明的！你是怎么做到的？
正如所写，这个问题一旦被回答就毫无用处（因为我认为您将修复错误，因此未来的访问者将看不到已解决的问题）。请编辑问题以包含相关代码。实际可见输出的屏幕截图（如果可能的话，用手绘圆圈突出显示异常：））也会有所帮助。
据我所知，问题是ff中的“margin：auto”结果为0px

标签： html css firefox stylesheet

【解决方案1】：

问题在于把图片放在css中

#logo img { display: block; }

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

【讨论】：

【解决方案2】：

修改后的答案：解决方案是将logo 合并到navigation 部分并且将#header 与@ 放在一起987654325@在网页上。

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

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

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

参考：jsFiddle

在地址栏中不带/show/ 的情况下访问上述jsFiddle 以查看编辑页面。

【讨论】：