5丁目通信(仮称)

とある5丁目で活動する還暦間近のWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。

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


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

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

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

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

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

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

,

%d人のブロガーが「いいね」をつけました。