84 votes

background-position-y ne fonctionne pas dans Firefox (via CSS)?

Dans mon code l' background-position-y ne fonctionne pas. Dans google Chrome, c'est ok, mais ne fonctionne pas sous Firefox.

Quelqu'un a une solution?

120voto

Orabîg Points 4513

Si votre position-x est 0, il n'y a pas d'autre solution que d'écrire :

background-position: 0 100px;

background-position-x est un non-standard de la mise en œuvre à venir de l'ei. Chrome n'a copier, mais malheureusement ce n'est pas firefox...

Cependant, cette solution ne peut pas être parfait si vous avez séparé les sprites sur un grand fond, avec les lignes et colonnes sens des choses différentes... (par exemple, les différents logos sur chaque ligne, sélectionné/a plané sur la droite, de la plaine à gauche) Dans ce cas, je vous suggère de séparer la grande image en images distinctes, ou écrire les différentes combinaisons dans le CSS... Selon le nombre de sprites, l'un ou l'autre pourrait être le meilleur choix.

19voto

farshad saeidi Points 77

utilisation

background: url("path") 89px 78px no-repeat;

Au lieu de cela

background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;

2voto

Je cherchais quelque chose comme ça et j'ai trouvé cette réponse.
il est un exemple de travail en jsfiddle trop. la maison c'est utile.

0voto

ace.spades Points 3

Cependant, cette solution ne peut pas être parfait si vous avez séparé les sprites sur un grand fond, avec les lignes et colonnes sens des choses différentes... (par exemple, les différents logos sur chaque ligne, sélectionné/a plané sur la droite, de la plaine à gauche) Dans ce cas, je vous suggère de séparer la grande image en images distinctes, ou écrire les différentes combinaisons dans le CSS... Selon le nombre de sprites, l'un ou l'autre pourrait être le meilleur choix.

La mienne a le problème exact, comme l'a déclaré Orabîg qui a une table comme sprite qui a des colonnes et des lignes.

Voici ce que j'ai utilisé comme une solution de contournement en utilisant js

firefoxFixBackgroundposition:function(){
  $('.circle').on({
    mouseenter: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');   
    },
    mouseleave: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');   
    }
  });      
}

0voto

brightmatrix Points 153

Assurez-vous d'indiquer explicitement la mesure de l'offset. Je suis tombé sur ce problème précis aujourd'hui, et c'était dû à la manière dont les navigateurs interprètent les valeurs que vous fournissez dans votre CSS.

Par exemple, cela fonctionne parfaitement dans google Chrome:

background: url("my-image.png") 100 100 no-repeat;

Mais, pour IE et Firefox, vous devez écrire:

background: url("my-image.png") 100px 100px no-repeat;

Espérons que cette aide.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X