16

我想css sprite（精灵图像总宽度：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">&nbsp;</div>
  </div>
 </body>

“链接”和“悬停”和“活动” FF,Chrome,Safari,Opera 像这样；

在此处输入图像描述

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

在此处输入图像描述

我将上面的图像具体化以使其看起来更好。我的精灵图像；

在此处输入图像描述

4

6 回答 6

8

为什么不使用 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 没有？

于 2012-12-28T22:36:09.837 回答
3

将 Internet Explorer 特定样式表添加到该<head></head>部分。

<!--[if lt IE 9]>
<link rel="stylesheet type="text/css" href="/css/ie.css" />
<![endif]-->

并ie.css执行以下操作：

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

（ie总是有问题，唷！）

于 2012-12-25T12:58:32.850 回答
3

我使用您的图形创建了一个假精灵，以查看您所看到的内容，但在所有 IE 7-9 中看起来都不错（请注意，我只是更改了定位并使其具有显着性（更少）：

http://jsfiddle.net/Riskbreaker/Rr8p2/

body{
    margin:0;
    padding:0;
}

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

.button:hover{
    background-position:0px -27px;
}

.button:active{
    background-position:0px -27px;
}

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

记住我制定的定位，以便您进行调整。我以前从未遇到过活动的 IE 问题...但是让我知道您所看到的...如果问题仍然存在并且您不想要另一个文件，请执行以下操作：

IE7：（*.button:active{background-position:0px -28px;}或任何正确的位置）......

IE8：.button:active{background-position:0px -28px\9;}…………

IE9 ....不确定您的最新版本，但应该没有任何问题（最新版本）

于 2012-12-28T02:15:09.473 回答
3

我以前在 IE8 上遇到过类似的问题，但 IE9 在我的情况下运行良好（不确定 IE7，但它必须像 IE8 一样）。

它可以通过以下两种方法之一解决/改进：

1）修改图像（可能是分辨率，颜色组合等）并尝试它是否有效。为什么这可能有效？因为在您的示例中，IE 似乎试图“智能”地进行一些图像处理，不幸的是有时会出错（特别是对于小图像/像素完美的情况），您只能希望它不会对您的新图像造成严重失败。


2) 使用0.5px单位的背景位置精度。

    请注意以下代码中的“ background-position: -15.5px 0; ”。此解决方案将至少减少 50% 的挫败感 :-) 恐怕您可能需要为此解决方案提供 IE 特定的 CSS 但这应该没问题...您可以使用 JavaScript 或在标签上添加浏览器标识符类名称使用@ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/提到的技术，然后在编写浏览器特定的 CSS 时使用这些类名。

解决方案：

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

.button:hover {
    background-position: -15.5px 0;
}

.button:active {
    background-position: -30px 0;
}

.cont {
    width: 200px;
    height: 200px;
    float: left;
    margin: 50px 0 0 100px;
}
于 2013-01-01T06:17:28.347 回答
3

您可以使用以下技巧，这将有助于提供手动价值

对于 IE7（值前的下划线）

.button:hover {
    background-position: _-15.5px 0; 
}

或 IE-7 & IE-8(需加\9)

.button:hover {
    background-position: -15.5px\9; 
}

仅适用于 IE8 (\0/)

*+.button:hover {
    background-position: -15.5px\0/;
}
于 2013-01-03T05:18:55.727 回答
2

尝试在 css 中进行此更改：

.button{
    background: url(sprite-image.png) no-repeat left 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.button:hover{
    background: url(sprite-image.png) no-repeat center 0;
}
.button:active{
    background: url(sprite-image.png) no-repeat right 0;
}
于 2012-12-27T15:05:13.017 回答