Safari, ChromeでCSSのbackground-imageの背景が表示しない。

CSSのbackground-imageで指定した画像で背景が表示できます。IEやFirefoxで背景が表示できても、AppleのSafariやGoogleのChromeで表示できない場合があります。例えば、

<a href=”javascript:void(0)”, onClick=”xxxx”></a>

とかして、幅と高さをCSSで指定した実体のないリンクに背景を表示する場合です。この場合は、背景の画像をボタンとしてクリックするとonClickで指定したJavascriptのコードが呼ばれることを期待します。本来なら実体のないリンクでIEやFirefoxで背景が表示されるのが問題ですし、背景画像をボタンにするものおかしいですが、あるJavascriptのライブラリが背景ボタンとしていますのでしかたありません。

解決方法は、単純に何かを実体として置いてあげればよいのです。つまり、

<a href=”javascript:void(0)”, onClick=”xxxx”><img src=”/img/sp.gif” /></a>

などして、1ドット四方の画像をリンクさせてしまいます。これでSafariとChromeでも背景画像がボタンになります。

投稿者:

avatar

ando

50過ぎてもプログラマーの気持ちを忘れない。