我想要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"> </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无？
原文地址：https://www.jb51.cc/css/218217.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
