对于损坏的图像，它是否指定浏览器是否应该服从宽度/高度属性/ CSS或考虑它们被替换元素？

Question

我注意到浏览器在显示时显示的内容有很大不同：内联图像被破坏。当图像被破坏时，是否应该有任何标准行为，至少在是否仍然遵守宽度和高度（HTML属性或CSS）方面，以及该元素是否仍被视为替换元素？

https://html.spec.whatwg.org/multipage/images.html#img-error似乎没有定义这个。某处有补充吗？自从最早的图形浏览器以来，我习惯于不同的浏览器拥有不同的破碎图像图标，但我认为现在至少可以在某处指定与布局相关的东西。这不是这种情况吗？

当src为404时，有一个alt属性，并且显示为默认值（内联）：

• Chrome根据其填充和边距放置图像，同时忽略任何宽度和高度属性/ CSS。
• 与Chrome一样，Firefox根据填充推出边框（和Chrome一样，忽略任何宽度和高度属性/ CSS），但是边框与相邻内容重叠，因为流程完全由alt文本设置，而不是其内容+填充+边框+余量。
• Safari和Edge遵循宽度/高度尺寸，就像所有浏览器设置display：inline-block一样。
• 破碎的图像元素是否被视为被替换似乎存在差异：在各个浏览器的DOM检查器中，所有浏览器（即使在src不工作时遵循维度的Safari和Edge）也表示它们默认为IMG要显示的元素：内联。然而，图像元素应用垂直边距的事实（除了Firefox的情况）似乎表明它们仍被视为替换元素，即使在破坏时也是如此，除了Firefox的情况。 （也就是说，margin-top和margin-bottom应该对显示没有影响：内联非替换元素，因此Firefox显然有点将损坏的图像视为非替换元素。）另一方面，它仅在你可以拥有img :: before {content：'text'}伪元素的Chrome会出现在损坏的图像中，就像在非替换元素中一样。

我在下面的破碎图片中注意到的其他事情：

• Chrome出于某种原因仅在非零长度的alt字符串或根本没有alt属性时才显示损坏的图像图标。当没有alt属性时，Firefox仅显示损坏的图像图标。在所有情况下，Safari和Edge都会显示损坏的图像图标。
• 仅当没有alt属性时，Chrome和Firefox才会显示缺少内容的占位符内容边界框。 Safari始终显示内容边界框，Edge在任何情况下都不显示内容边界框。
• 如果显示：应用了内联块并且没有正常工作的src且alt字符串长度不为零，则Chrome和Firefox会使该行上后续文本的基线向上移动。 （请参阅下面“强制内联块”部分中的第一行。）这在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）

如果元素是表示某些文本的img元素，并且用户代理不希望这更改

期望用户代理将元素视为未替换的短语元素，其内容是文本，可选地具有指示图像缺失的图标，以便用户可以请求显示图像或调查其未呈现的原因。在非图形上下文中，应省略这样的图标。

因此，当图像被破坏时，它应该是一个未被替换的元素。

但请注意，浏览器不必符合第10节的要求。“预期”意味着浏览器只有在声明的情况下才需要遵守。

用户代理不需要以任何特定方式呈现HTML文档。但是，本节提供了一组用于呈现HTML文档的建议，如果遵循这些建议，可能会导致用户体验非常类似于文档作者的预期体验。 [...]为了符合指定支持建议的默认呈现的用户代理，本节中的“预期”一词与“必须”具有相同的一致性含义。 （10 Rendering）（WHATWG）