3

这是我的网站：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;
}
4

2 回答 2

3

问题在于图像把它放在css中

#logo img { display: block; }

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

于 2012-07-26T21:23:19.153 回答
0

修改后的答案：解决方法是将并入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;
}

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

注意：@font-face由于安全设置，下面的 jsFiddle 不会渲染字体。

参考：jsFiddle

在地址栏中访问上述 jsFiddle/show/以查看编辑页面。

于 2012-07-26T21:47:46.730 回答