CSS Sprites - код работает в Chrome, не работает в FF и IE ... почему? - PullRequest
Новая
       0

CSS Sprites - код работает в Chrome, не работает в FF и IE ... почему?

1 голос
/ 09 декабря 2010

Я использую спрайты для управления двумя графическими элементами навигации. Написанный мною CSS отлично работает в Chrome, но не работает в FF и IE.

CSS это: 

a.gallery-left{
 margin-top: 5px;
 background: url('arrows_sprited.png') 0 0px;
 width: 45px; 
 height: 34px; 
 overflow: hidden;
 float: left;
}

a.gallery-left:hover  {
 background: url('arrows_sprited.png') -46 0px;
 cursor: pointer;
 zoom: 1;
}

a.gallery-right{
 margin-top: 5px;
 background: url('arrows_sprited.png') -133 0px;
 width: 46px; 
 height: 34px; 
 overflow: hidden;
 float: right;
}

a.gallery-right:hover  {
 background: url('arrows_sprited.png') -89 0px;
 cursor: pointer;
 zoom: 1;
}

Вызывается в HTML-документе следующим образом: 

   <a class="gallery-left"></a>
   <a class="gallery-right"></a>

Почему это не работает в FF? Когда я рассматриваю элемент с помощью firebug, второй не виден (но он есть в первом. Очень странно.

есть идеи? большое спасибо!

Ответы [ 2 ]

3 голосов
/ 09 декабря 2010

добавить px после значений смещения. 

background: url('arrows_sprited.png') 0px 0px;
background: url('arrows_sprited.png') -46px 0px;
background: url('arrows_sprited.png') -133px 0px;
background: url('arrows_sprited.png') -89px 0px;

В первом это сработало, потому что значение равно 0, что является универсальным для всех типов единиц.

0 голосов
/ 09 декабря 2010

Встроенные элементы не учитывают значения ширины или высоты.Они будут иметь точно такую ​​же ширину и высоту, которые соответствуют любому тексту, который они содержат, в данном случае это пустая строка.

Либо измените значение <a> на <div>, либо установите значение display: block.

...