对于损坏的图像，是否在任何地方指定浏览器应该遵守 width/height attributes/CSS 还是将它们视为替换元素？

Question

我注意到当 display:inline 图像损坏时，浏览器之间的行为非常不同。当图像损坏时，是否应该有任何标准行为，至少在是否仍然遵守宽度和高度（HTML 属性或 CSS）方面，以及元素是否仍被视为替换元素？

https://html.spec.whatwg.org/multipage/images.html#img-error 似乎没有定义这个。有什么补充的地方吗？自从最早的图形浏览器以来，我已经习惯了不同的浏览器具有不同的损坏图像图标之类的东西，但我认为现在至少会在某处指定与布局相关的东西。不是这样吗？

当src为404ed时，有alt属性，display保留为默认（内联）：

Chrome 根据填充和边距布置图像，同时忽略任何宽度和高度 attributes/CSS。
与 Chrome 一样，Firefox 根据 padding 推出边框（并且，与 Chrome 一样，忽略任何宽度和高度 attributes/CSS），但边框与相邻内容重叠，因为流完全由替代文本设置，而不是其内容+填充+边框+边距。
Safari 和 Edge 遵循 width/height 尺寸，就像所有浏览器一样，如果您设置 display:inline-block。
损坏的图像元素是否被视为替换似乎存在差异：在各自浏览器的 DOM 检查器中，所有浏览器（甚至 Safari 和 Edge，即使在src 不工作）表示它们默认 IMG 元素为 display:inline。然而，图像元素应用了垂直边距这一事实（Firefox 除外）似乎表明它们仍然被视为替换元素，即使在损坏时也是如此，Firefox 除外。（也就是说，margin-top 和 margin-bottom 应该对 display:inline non-replaced 元素没有影响，因此 Firefox 显然将损坏的图像视为非替换元素。）另一方面，只有在 Chrome 中，您才能在损坏的图像中显示 img::before{content:'text'} 伪元素，就像在非图像中一样-替换元素。

我在下面损坏的图片中注意到的其他内容：

Chrome 出于某种原因，只有在存在非零长度的 alt 字符串或根本没有 alt 属性时才会显示损坏的图像图标。当根本没有 alt 属性时，Firefox 只会显示损坏的图像图标。 Safari 和 Edge 在所有情况下都会显示损坏的图像图标。
Chrome 和 Firefox 仅在没有 alt 属性时显示缺失内容的占位符内容边界框。 Safari 始终显示内容边界框，Edge 在任何情况下都不显示内容边界框。
如果应用 display:inline-block 并且没有有效的 src 并且 alt 字符串的长度不为零，Chrome 和 Firefox 会使该行后续文本的基线向上移动。（请参阅下面 "Forced inline-block" 部分的第一行。）这不会发生在 Safari 或 Edge 中。

（没有 alt 属性的图像实际上无效 HTML，但显示是为了比较行为。）

在 Chrome 64、Firefox 58、Safari 11、EdgeHTML 16.16299

中测试

img{
  border:1px solid black;
  margin:1em;
  padding:1em;
}

.force-ib-images img{
  display:inline-block;
}

<img src="x" width="300" height="120" alt="alttext"> (alt="alttext") <br>
<img src="x" width="300" height="120" alt=""         > (alt="")<br>
<img src="x" width="300" height="120" alt            > (alt)<br>
<img src="x" width="300" height="120"                > (no alt attribute)<br>

<hr>

<h3>
  with height/width set via css:
</h3>

<img src="x" style="width:300px; height:120px" alt="alttext"> (alt="alttext") <br>
<img src="x" style="width:300px; height:120px" alt=""         > (alt="")<br>
<img src="x" style="width:300px; height:120px" alt            > (alt)<br>
<img src="x" style="width:300px; height:120px"                > (no alt attribute)<br>

<hr>

<div class="force-ib-images">

  <h3>
    Forced inline-block:
  </h3>

  <img src="x" style="width:300px; height:120px" alt="alttext"> (alt="alttext") <br>
  <img src="x" style="width:300px; height:120px" alt=""         > (alt="")<br>
  <img src="x" style="width:300px; height:120px" alt            > (alt)<br>
  <img src="x" style="width:300px; height:120px"                > (no alt attribute)<br>

</div>


<hr>

  <h3>
    With image:
  </h3>

<img src="https://i.imgur.com/FQFzBJh.png" width="300" height="120" alt="an image">

JSFiddle：https://jsfiddle.net/upkt6p7p/

Answer 1

来自 HTML 5.3 10.4.2 Images: _(WHATWG)

If the element is an img element that represents some text and the user agent does not expect this to change

The user agent is expected to treat the element as a non-replaced phrasing element whose content is the text, optionally with an icon indicating that an image is missing, so that the user can request the image be displayed or investigate why it is not rendering. In non-graphical contexts, such an icon should be omitted.

所以图片破损时应该是non-replaced元素

但请注意，浏览器不必遵守第 10 节。"is expected" 表示浏览器仅在声明遵守时才需要遵守。

User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions for rendering HTML documents that, if followed, are likely to lead to a user experience that closely resembles the experience intended by the documents' authors. [...] For the purposes of conformance for user agents designated as supporting the suggested default rendering, the term "expected" in this section has the same conformance implications as "must". (10 Rendering)_(WHATWG)

对于损坏的图像，是否在任何地方指定浏览器应该遵守 width/height attributes/CSS 还是将它们视为替换元素？

For broken images, is it specified anywhere whether browsers are supposed to obey width/height attributes/CSS or consider them replaced elements?

html

css

cross-browser