アイキャッチ画像がないときにレイアウトを維持、また画像を表示方法で、アイキャッチ画像表示について書いたのですが、Firefoxに関して、imgのsrcに代替画像のURLを設定しないとFirefoxではimgタグを表示しないのでレイアウトが崩れます。
<img src="" class="attachment-post-thumbnail wp-post-image" />
もし、画像ファイルのURLを設定しないで代替画像を表示しないときでも、レイアウト(幅や高さ)を維持したいときもあるかもしれません。
そのようなアイキャッチ画像の設定で、imgのsrcにURLの設定をしなくてもレイアウトを維持できるCSSのコードが、Firefoxで壊れた画像のアイコンを表示という記事にありました。壊れたアイコンを表示するコードなんですが、レイアウトを維持できます。
img:-moz-broken{ -moz-force-broken-image-icon: 1; width: 100px; height: 100px; }
下のコードでも画像表示(imgタグを表示)されない部分を表示してくれます。
img:-moz-broken{ display:block; }
スポンサーリンク
コメント