img
まだ読み込まれていないHTML の高さを事前に設定したい状況があります。その理由は、この高さは、画像が完全に読み込まれる前に実行される可能性があり、正確さを維持する必要がある計算で使用されるためです。私は次のことを試しました:
<div>hello<img src='http://example.com/invalid.gif' class="testimage"> there</div>
cssをいくつか入れます
.testimage {
height: 200px;
width: 200px;
}
少なくとも Firefox 5 では、余分なスペースはレンダリングされません (奇妙なことに、壊れた画像も表示されず、空白だけです)。つまり、追加するまでですdisplay: inline-block
。少なくとも一部の他のブラウザでは、デフォルトの表示でinline
目的の結果が得られます。これは期待されていますか?もしそうなら、なぜですか?
ここにもjsFiddleがあります:http://jsfiddle.net/uYXD4/