HTML强制img维度需要阻止？

Question

我有一种情况，我希望HTML img尚未加载到预先设定的高度。原因是该高度将用于计算，该计算可能在图像完全加载之前触发并且需要保持准确。我尝试了以下方法：

<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/

Answer 1

它在这里说图像是内嵌元素 - http://htmlhelp.com/reference/html40/special/img.html

另一方面，请看一下 - Is <img> element block level or inline level?

看起来<img>元素既有内联又有块。没有严格的规则来定义它，因此浏览器供应商可能会自己决定默认值。因此，最好的办法是将其假设重置为display: inline-block

Answer 2

图片为replaced elements：

  

其内容超出CSS格式模型范围的元素，例如图像，嵌入文档或小程序。例如，HTML IMG元素的内容通常被其“src”属性指定的图像替换。

对于已替换元素，display: inline-block为supposed to have the same exact same efffect为display: inline，这是默认值。

所以这可能是某些浏览器中奇怪行为的可能解释*：

他们只将完全加载的图像视为替换元素，否则将其视为非替换元素。毕竟这是有道理的，标准没有明确禁止这一点。因此，有三种可能的情况：

1. 替换元素，内联或内联块无关紧要，height属性工作
2. 内联非替换元素，height属性has no effect
3. 内联块未替换元素，height属性有效

加载的图像总是符合1.，破坏/加载图像可能符合1.或2.（或3.如果你设置display：inline-block显式）

*不确定这是否真的有效。

Answer 3

为什么不使用

之类的东西

<img src="..." width=400 height=200>

我正在做同样的事情而且效果很好。另一种选择是......

$('.myimg').load( function() { /* ops */ } );

虽然我不知道是否等待在所有浏览器中加载图像