为什么 <img> alt 属性并不总是正确显示答案

【问题标题】：why is the <img> alt attribute not always properly displayed为什么 <img> alt 属性并不总是正确显示
【发布时间】：2015-02-02 00:28:17
【问题描述】：

所以我有这个 php 脚本，它输出一个 html 表，其中包含一些文件的数据（如文件名、文件大小等......）

我有这个 javascript 函数，当您悬停属于“预览”类的标签时，它会显示图片。例如，如果文件名为：somePic.jpg，当您将 somePic.jpg 悬停在表格中时，图片将出现在您的鼠标旁边。

现在不是所有这些文件都是图片，有些是.mp3，所以当你将它们悬停时，javascript当然无法显示图片。为了处理这种情况，我在标签（由javascript函数生成）中添加了一个alt属性：alt='Preview not available for this type content.'

这是我的问题，有时有效，但有时无效！有时您开始悬停.mp3链接，并显示alt属性，然后悬停图片，显示图片，然后再次悬停.mp3，alt不再显示，而是“损坏的图像”图像（小红叉）改为显示...

当然我可以解析文件名并检测它何时是 mp3，然后处理这种情况，但我认为 alt 属性应该可以实现这一点......但它有问题......

有什么想法吗？有人遇到过这个问题吗？

【问题讨论】：

【解决方案1】：

您似乎混淆了alt 属性和title 属性。

alt 属性是img 特有的属性，用于指定在图像无法呈现的情况下要呈现的替代内容。 title 是一个通用属性，用于在将鼠标悬停在元素上时提供工具提示。

一些损坏的 UAcoughIEcough 将图像上的 alt 视为 title；很多混乱的根源。

【讨论】：

"alt 属性是一个特定于 img 的属性，用于指定在图像无法呈现的情况下要呈现的替代内容。"所以每次不是图片时，都应该渲染alt，对吧？ ^_^ 这是我的情况，实际上它有时会起作用，但并非总是如此......我想这只是一个错误的行为......

【解决方案2】：

一般alt 用于禁用图像时，而不是作为错误条件的支持。虽然 IMO 在错误条件下显示替代文本是一个理想的功能，但标准并没有说它必须：

对于无法显示图像、表单或小程序的用户代理，此属性指定替代文本。

确实浏览器的行为会有所不同。 WebKit (Safari, Chrome) 只会显示损坏的图像图标，而不会显示 alt 文本； IE 尝试在带有图像图标的框内呈现 alt 文本（通常显示效果不佳）。

因此，您不应依赖在错误时显示替代文本。

当然，我可以解析文件名并检测它何时是 mp3

是的，我认为你必须这样做。在一般情况下这也不可能，因为文件名/URL 扩展名很可能与实际文件类型无关。但是，如果您自己控制所有 URL，则可以保证所有 MP3 都称为...mp3。

【讨论】：

【解决方案3】：

让 PHP 检测文件类型并让它仅在图像上呈现 javascript 内联如何。

您还应该检查 FireBug，看看当您将鼠标悬停在图像上时发生了什么。

【讨论】：