占位符图像在 Firefox 中不起作用答案

【问题标题】：Placeholder images don't work in Firefox占位符图像在 Firefox 中不起作用
【发布时间】：2014-06-22 02:43:35
【问题描述】：

我正在制作一个网站，但设计师尚未构建所有图像。在 Chrome、Safari 甚至 IE 中，我可以将其用作占位符图像：

<img src="" alt="Placeholder" title="Placeholder" height="400" width="300">

它显示为一个 400x300 的框，并且 alt/title 文本显示在其中。但是，在 Firefox 中，替代文本是存在的，但图像没有保持正确的尺寸。图像下方的内容出现在 alt 文本之后，而不是下方几百像素处。这完全打破了布局。我必须制作一个实际的占位符 .png，还是有办法让 Firefox 显示具有适当尺寸的占位符？

Here's a pen 演示问题。您会注意到，即使我在 HTML 属性之外添加 CSS 高度和宽度属性，它也不起作用。

如果您没有出现问题 - 如果占位符图像出现 400 像素高 - 请在 cmets 中告诉我您使用的操作系统和 FF 版本。有可能这对每个人来说都不是问题。

【问题讨论】：

标签： html firefox cross-browser

【解决方案1】：

在 Firefox 中尝试删除 alt 属性。

如果图像无法显示，Firefox 只会显示 alt 文本（“alt”文本应该用于此目的）。但是，我认为有一种方法可以让 Firefox 做你想做的事：

在 Firefox 中打开一个新选项卡，然后在地址栏中输入“about:config”（不带引号）。在“过滤器”框中键入“图像”（同样，不带引号）确保“browser.display.show_image_placeholder”选项设置为“true”（双击它将切换值）。

【讨论】：

我已经检查了 show_image_placeholder 是真的。然而，令人着迷的是，删除 alt 文本起到了作用。我正在与一位盲人开发人员合作，因此保留替代文本是一个优先事项，我只需要使用虚拟图像作为占位符，但这回答了我的问题。