Question

我正在尝试更新一些代码以使用CSS sprites。在某些情况下它工作正常，在其他情况下，它会搞砸页面布局，我无法弄清楚我做错了什么。

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

我已经创建了我的精灵，并尝试将CSS更改为：

.footer-left {

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

尺寸和偏移是正确的，但结果不是很好。精灵区域大致显示在正确的位置，但是footer-logo.gif和

文本混乱了。

有什么想法吗？

Answer 1

对徽标和文字产生影响的唯一因素是您添加的尺寸;您将页脚的width设置为20px，如果之前不存在，那肯定会对您的bla bla bla文字和.footer_right产生影响。

请注意，.footer_right和文字都位于20px广footer_left内。

您确定嵌套的div结构是否正确？

CSS精灵问题，搞砸了布局

1 个答案: