HTML强制img维度需要阻止？

Question

我有一种情况,我想要一个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/

Answer 1

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

对于替换元素，display: inline-block应该具有与完全相同的效果display: inline，这是默认值。

因此，这可能是某些浏览器中奇怪行为的可能解释*：

它们仅将完全加载的图像视为替换元素，否则将其视为非替换元素。这毕竟是有道理的，而且标准并没有明确禁止这样做。因此，有 3 种可能的情况：

已加载的图像始终符合 1. 的条件，而损坏/正在加载的图像可能符合 1. 或 2. （或 3. 如果您明确设置了 display: inline-block ）

*但不确定事情是否真的如此。