html - エラーのある html img タグ - FF 表示の問題

Question

次のようにHtml imgタグを使用しています：

<img src="url_to_some_pic" alt="alternative error message"
    width="300" height="300">
</img>

壊れた URL Chrome & IE の場合、このエラーメッセージを画像の元のディメンション内に期待どおりに表示しますが、FF ではありません。

FF で何が起こるかというと、FF はエラーメッセージを表示しますが、画像領域 (300 x 300) 内ではなく 1 行で表示します。

誰でもこの問題を修正する方法を知っていますか?

cssが解決策になると思いますが、どうですか？

ありがとう、

ジョン。

score 0 · Accepted Answer

各ブラウザは独自の方法で処理しており、一貫したフォーマット方法はありません。画像をコンテナに入れることを検討します。

少なくともこの方法では、altは常に左上に配置されます。

HTML：

<div id='image'>
    <img src="url_to_some_pic" alt="alternative error message" width="300" height="300">
</div>

CSS：

#image {
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

score -1 · Accepted Answer

マークアップエラーがあります。img タグは自動終了タグです。代わりに次のように使用する必要があります。

<img src="url_to_some_pic" alt="alternative error message"
width="300" height="300" />

これで問題が解決するはずです。しかしまた、画像に幅と高さを追加するためのより適切で標準的な方法は、次のように CSS を使用することであることを知っておくとよいでしょう。

<img src="url_to_some_pic" alt="alternative error message"
style="height: 300px; width: 300px;" />

2 に答える 2