５丁目通信（仮称）

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>

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

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

SBクリエイティブ

¥10 （2024/11/20 15:28時点 | Amazon調べ）

Amazon

ポチップ

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

著:谷 拓樹

¥1,881 （2024/11/20 15:28時点 | Amazon調べ）

Amazon

ポチップ

HTML&CSSポケットリファレンス　［改訂3版］

技術評論社

¥1,980 （2024/11/20 15:28時点 | Amazon調べ）

Amazon

ポチップ