对于损坏的图像，是否在任何地方指定浏览器是否应该遵守宽度/高度属性/ CSS或将其视为替换元素?

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

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

当 src 为 404ed 时，有一个 alt 属性，并且显示保留为默认值(内联)：

Chrome 根据图像的填充和边距对图像进行布局，同时忽略任何宽度和高度属性/CSS。
Firefox 根据填充推出边框(并且像 Chrome 一样，忽略任何宽度和高度属性/CSS)，但与相邻内容重叠边框，因为流程纯粹由替代文本设置，而不是其内容+填充+边框+边距。
Safari 和 Edge 遵循宽度/高度尺寸，就像所有浏览器在设置 display：inline-block 时所做的那样。
是否将损坏的图像元素视为替换方面似乎存在差异：在相应浏览器的 DOM 检查器中，所有浏览器(甚至 Safari 和 Edge，即使 src 不工作也服从尺寸)都指示它们默认 IMG 元素为 display：inline。然而，图像元素应用垂直边距的事实(Firefox的情况除外)似乎表明，即使损坏，它们仍然被视为替换的元素，除了Firefox的情况。(也就是说，上边距和下边距应该对显示没有影响：内联非替换元素，所以 Firefox 显然将损坏的图像视为非替换元素。另一方面，只有在Chrome中，您才能在损坏的图像中显示img：：before{content：'text'}伪元素，就像在未替换的元素中一样。

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

出于某种原因，Chrome 仅在存在非零长度的 alt 字符串或根本没有 alt 属性时显示损坏的图像图标。Firefox 仅在根本没有 alt 属性时才显示损坏的图像图标。Safari 和 Edge 在所有情况下都会显示损坏的图像图标。
Chrome 和 Firefox 仅在没有 alt 属性时显示一个占位符内容边界框，用于显示缺失的内容。Safari 始终显示内容边界框，Edge 在任何情况下都不显示内容边界框。
如果应用了 display：inline-block，并且没有工作的 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/

来自 HTML 5.3 10.4.2 图片：_(WHATWG)

如果元素是表示某些文本的 img 元素，并且用户代理不希望这种情况发生变化

用户代理应将该元素视为未替换的措辞元素，其内容为文本，可选择带有图标指示缺少图像，以便用户可以请求显示图像或调查其未呈现的原因。在非图形上下文，应省略此类图标。

因此，当图像损坏时，它应该是未替换的元素。

但请注意，浏览器不必符合第 10 节。"预期"意味着浏览器只需要遵守它声称这样做。

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

相关内容

最新更新

热门标签：