IE9/8/7 css精灵位置滑动问题
mid*_*ack 16 css internet-explorer css-sprites background-image internet-explorer-8
我想要css精灵(精灵图像总宽度:45px和总高度:15px由三个图像组成)但IE9/8/7中存在问题.链接和悬停工作,但单击按钮(活动)精灵图像滑动到左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无？
- 我喜欢这个,但在这种情况下,页面加载三个不同的CSS,这不适合修复一个问题. (2认同)