当img无法显示时应该发生什么？

Question

当img无法显示时,浏览器应该做什么？

官方消息来源故意模糊不清.他们说alt文本应该被使用,但他们没有说怎么做!
所以,除非我没有足够好的搜索(我做了很多谷歌搜索.我甚至Binged!)这些信息不存在.浏览器在他们的工作中差别很大.

如果无法加载图像,因为它不存在,

• Mozilla将alt文本显示为当前文本的一部分
• IE将替换文本显示为内联块,前面是"损坏的图像"图标,并以不同的字体显示
• Chrome还会显示内嵌块和"损坏的图像"图标,并在其周围添加边框.但它并没有改变字体.

<p>This is my new car.
  <img src="images/mynewcar.jpg" alt="It's a red car, with four wheels."/>
  And that's it.</p>

现在,如果您将浏览器的设置更改为不加载图像,则大多数浏览器中的行为都会发生变化.

• Chrome现在不显示任何内容,甚至不显示替代文字.
• IE仍以较小的字体显示替代文字,但现在前面没有"破碎的图像"图标.
• Mozilla仍然以内联方式显示替代文字.

所以我的问题是,哪些浏览器做对了？

而且我并不是说,"你认为最好的方法是什么"？我真的是指管理这种行为的官方规则是什么？是否有我错过的W3C页面(甚至是WHATWG页面),或者我误解了规则的地方？

Answer 1

似乎对此没有硬性规定。HTML 规范仅描述了浏览器的行为方式，但没有对浏览器严格遵循所述行为施加规范要求。CSS 规范甚至没有触及它。

\n

W3C HTML5 的第 10.4.2 节描述了如何img根据一组涉及img元素所代表内容的规则来呈现元素。

\n

第 4.7.1 节向下描述了元素img根据其src和alt 属性表示的内容：

\n

\n

元素代表什么img取决于src属性和alt属性。

\n

[...]

\n

如果src设置了该属性并且该alt属性设置为不为空的值

\n

图像是内容的关键部分；该alt属性给出图像的等效文本或替换。

\n

如果图像可用并且用户代理配置为显示该图像，则该元素表示该元素的图像数据。

\n

否则，该元素表示由alt。用户代理可以向用户提供图像存在但在渲染中被省略的通知。

\n

\n

因此，如果图像不可用，则用一个img元素表示其替代文本（因为没有要表示的图像！）。

\n

因此，回到第 10.4.2 节，以下规则适用：

\n

\n

如果该元素是img表示某些文本的元素，并且用户代理不希望这种情况发生更改
\n用户代理应将该元素视为内容为文本的非替换短语元素，可以选择使用一个图标来指示该元素图像丢失，以便用户可以请求显示图像或调查图像未呈现的原因。在非图形上下文中，应省略此类图标。

\n

\n

Firefox 似乎最严格地遵循了这一期望（注意：不是要求），尽管我不确定生成的框是否被替换。同样，对于其他浏览器 \xe2\x80\x94，内联块可以被替换或不被替换。请注意，HTML 说的是“短语元素”，而不是“内联元素”或“内联块元素”，这再次增加了整个事情的模糊性。

\n

当通过用户首选项禁用图像时，Chrome 所做的并不是我所说的“[向]用户提供图像存在但已在渲染中省略的通知”，但同样，这也不是必需的。不过，我不明白为什么 Chrome 认为这是个好主意。替代文本又是用来做什么的？

\n