Firefoxで画像が無いときのレイアウトを維持して表示する方法

アイキャッチ画像がないときにレイアウトを維持、また画像を表示方法で、アイキャッチ画像表示について書いたのですが、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;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です