Совместимость CSS Sprite в Firefox - PullRequest
Новая
       12

Совместимость CSS Sprite в Firefox

3 голосов
/ 01 сентября 2011

У меня есть элемент div, который использует классы CSS ниже. По сути, я создаю ссылку на изображение спрайта, которая меняется при наведении курсора. 

.home {
    background: url('images/home.png') 0 0;
    width: 150px;
    height: 188px;
    border: none;   
}

.home:hover {
    background-position: -150px 0;  
}

Когда я тестировал его в разных браузерах, он работал хорошо с большинством браузеров, за исключением некоторых версий Firefox. При наведении, это не меняет положение img. Как я читал из w3c для того, чтобы это работало в Firefox, свойство background-attachment для «fixed». Я сделал это и добавил свойство к обоим классам и все еще не работал. Когда я добавил свойство, изображение было отцентрировано, и все, что не было в пределах указанной ширины и высоты, было обрезано.

Ответы [ 4 ]

2 голосов
/ 10 сентября 2011

Вы должны иметь no-repeat для фонового изображения.Firefox прекрасно работает с background-position, но background-position-x и background-position-y не будут работать.Я не знаю, что вы готовы сделать для какого элемента, но он должен работать только с блочными элементами.Если это не блочный элемент, display: block требуется 

.home {
    background: url('images/home.png') no-repeat 0 0;
    width: 150px;
    height: 188px;
    border: none;   
    display: block;
}
2 голосов
/ 10 сентября 2011

Это предположение, не видя проблемы, но иногда использование фонового сокращения может привести к ошибкам в FF:

попробуй: 

.home {
  backround-image: url('images/home.png');
  background-position: 0 0;
  height: 188px;
  border: none;
}

.home:hover {
  background-position: -150px 0;
}
1 голос
/ 17 сентября 2011

Ой, похоже, я забыл добавить тег DOCTYPE в начале в файл, что способствовало тому, что это не работает в FF.

Добавлен 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

и это сработало!

0 голосов
/ 24 марта 2014 
 background-position: 0px 0px;
 background-position: -150px 0px;
...