IE9/8/7 css精灵位置滑动问题

我想要css精灵(精灵图像总宽度:45px,总高度:15px由三个图像组成),但IE9 / 8/7中有一个问题。链接和悬停工作,但是当单击按钮(活动)sprite图像滑倒到左1px。只有IE 9/8/7的问题。我如何解决这个问题?

CSS:

body{
    margin:0;
    padding:0;
}

.button{
    background:url(sprite-image.png) no-repeat 0 0;
    width:15px;
    height:15px;
    cursor:pointer;
}

.button:hover{
    background:url(sprite-image.png) no-repeat -15px 0;
}

.button:active{
    background:url(sprite-image.png) no-repeat -30px 0;
}

.cont{
    width:200px;
    height:200px;
    float:left;
    margin:50px 0 0 100px;
}

HTML:

 <body>
  <div class="cont">
     <div class="button">&nbsp;</div>
  </div>
 </body>

“链接”和“悬停”和“活跃”FF,Chrome,Safari,Opera这样的;

但IE 9/8/7主动看起来像这样;

我将上述图像进行了具体化,使其看起来更好。我的精灵形象

最佳答案
为什么不使用IE条件注释?

 <!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

然后编写例如CSS规则,如.lt-ie9 .someclass {}来定位IE版本。我使用它们修复一些IE特定的css东西。没有脏的黑客,没有hastle只是css。你是否检查过Firebug Lite会发生什么?大纲:0无?

转载注明原文:IE9/8/7 css精灵位置滑动问题 - 代码日志