読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

Firefoxでbackground-positionが効かなかった件

プログラミング

先日background-positionを使っていてどれも動くと思っていたのがFirefoxの最新で動かなかったので、共有します。

 

f:id:inagex:20130810013610p:plain

 

 

pcのブラウザでのデバッグはie対応に目がいきがちであるが、Firefoxも見逃してはいけません。先日書いていたcssのbackground-positionが効いていませんでした。

 

ある要素{

background-position-x:10px;

background-position-y:20px;

}

 としていたのですが、まったくbackground-positionはFirefoxのみ動いていなかったです。

 

こんなことあったのかと思いつつも調べると、

background-position-yはieが独自をwebkitに取り込んだものなので、効かないのは仕方ないという情報がありました。

 

そして解決策は非常に単純でした。

上記のコードを

 

ある要素{

background-position:10px 20px;

}

とするだけでちゃんと動きます。

background-positionはcssスプライトでも頻繁に使うので、注意が必要です。

 

まぁ前者のコードよりも後者のコードが短いので今後は後者を使っていこうと思います。