gpt4 book ai didi

css - IE9/8/7 css sprite 位置滑动问题

转载 作者:技术小花猫 更新时间:2023-10-29 10:18:49 26 4
gpt4 key购买 nike

我想css sprite(sprite image total width:45px and total height:15px consists of three image)但是在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;

enter image description here

但是 IE 9/8/7 active 看起来像这样;

enter image description here

我将上面的图片具体化以使其看起来更好。我的 Sprite 图片;

enter image description here

最佳答案

为什么不使用 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-stuff。没有肮脏的黑客,没有匆忙只是 css。您是否检查过例如 Firebug Lite 会发生什么?!大纲:0 没有?

关于css - IE9/8/7 css sprite 位置滑动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14030693/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com