6

我有一种情况，我希望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/

4

3 回答 3

3

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

另一方面看看这里 - <img> 元素是块级还是内联级？

看起来该<img>元素既是内联的又是块的。没有定义它的严格规则，因此浏览器供应商可能会自行决定默认设置。所以你最好的选择是将他们的假设重新设置为display: inline-block

于 2012-06-25T16:59:02.680 回答
2

图像被替换元素：

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

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

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

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

  1. 替换元素，内联或内联块无关紧要，height属性有效
  2. 内联非替换元素，height属性无效
  3. 内联块非替换元素，height属性有效

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

*不确定这是否是实际工作的方式。

于 2012-06-25T20:04:37.860 回答
0

为什么不使用类似的东西

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

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

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

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

于 2012-06-25T17:04:07.443 回答