CSS Sprite 问题，搞砸了布局

Question

我正在尝试更新一些代码以使用 CSS Sprite 。在某些情况下它工作正常，在其他情况下它搞砸了页面布局，我不知道我做错了什么。

这是 html 的片段....

  <div id="footer"><!-- footer -->
  <div class="footer-top">
   <div class="footer-left">
    <div class="footer-right">
     <a href="/index.php" id="footer-logo"><img src="footer-logo.gif" /></a>

     <br /><br />
     <div>
<p>blah blah blah</p>

     <div class="clearfloat"></div>
    </div>
   </div>
  </div>
  </div>

...和CSS:

.footer-left {
        background: url(/images//footer-left_.gif) no-repeat left top;
}

我已经创建了我的 Sprite ，并尝试将 CSS 更改为:

.footer-left {

      background:url('/images/sprites.gif')  -66px -2px no-repeat;
      width:20px;
      height:99px;
}

尺寸和偏移量是正确的，但结果并不理想。 Sprite 区域显示在大致正确的位置，但 footer-logo.gif 和

文本乱七八糟。

有什么想法吗？

Answer 1

唯一对 Logo 和文本有影响的是您添加的尺寸；您将页脚的 width 设置为 20px 如果之前没有，那肯定会对您的 bla bla bla 文本产生影响和 .footer_right。

请注意，.footer_right 和文本都位于 20px 宽的 footer_left 内。

你确定你嵌套的div结构是正确的吗？