IE9/8/7 css sprite position slip issue

Я хочу css спрайт (общая длина спрайта: 45 пикселей и общая высота: 15 пикселей состоит из трех изображений), но в 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>

"link" и "hover" и "active" FF, Chrome, Safari, Opera, например:

enter image description here

но активны IE 9/8/7,

enter image description here

Я конкретизировал выше изображения, чтобы они выглядели лучше. Мое изображение спрайта;

enter image description here

ОТВЕТЫ

Ответ 1

Почему бы не использовать 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-версию. Я использую их для исправления некоторых CSS-материалов, специфичных для IE. Никаких грязных хаков, не торопитесь просто css. Вы проверили, например, с Firebug Lite? схема: 0 нет?

Ответ 2

Добавьте специальный раздел стилей 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, phew!)

Ответ 3

Я создал фальшивый спрайт, используя вашу графику, чтобы увидеть, что вы видите, но выглядящий хорошо в моей скрипке во всех IE 7-9 (обратите внимание, что я просто изменяю позиционирование и делаю его construsive (less):

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.... не уверен, что ваш последний, но он не должен иметь никаких проблем (последний)

Ответ 4

Я столкнулся с аналогичными проблемами с 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;
}

Ответ 5

Вы можете использовать нижеприведенный трюк, который поможет дать ручное значение

Для IE7 (подчеркивание перед значением)

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

Или IE-7 и IE-8 (нужно добавить \9)

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

Для IE8only (\ 0/)

*+.button:hover {
    background-position: -15.5px\0/;
}

Ответ 6

Попробуйте это изменение в 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;
}