CSS 避免在打印预览中显示图像替代文本

Question

在 IE 8 中，当图像未显示时，我看到替代文本显示在打印预览中。该问题未在 chrome 中发生。我想在 IE 8 中解决这个问题。

图像的 Src 在运行时添加。有时服务器无法提供图片

<img src="null" alt="weird issue">

需要在不使用 javascript 的情况下进行修复

Answer 1

您不能直接设置替代文本的样式，但它会继承自 img 父级，因此最简单的方法可能就是简单地设置 的 color img 在 CSS 中变为白色(如果用于打印应用程序，则在您的打印样式中)。

试试这个:

img{
    color: #fff;
    background-color: #fff;
}

在那个例子中，我还将 background-color 设置为白色，但这可能不是 100% 必要的，因为如果这是一种打印样式，无论如何背景都不可避免地是白色的.

如本答案下方的评论中所述，您可以使用 CSS attribute selector仅针对那些以 'null' 作为来源的 img。

这会像这样工作:

img[src="null"]{
    color: #fff;
    background-color: #fff;
}

然而，这会带来一些额外的要求/假设:

• src 确实是“null”，而不仅仅是一个 ampty 字符串(在这种情况下，您可以使用 img[src=""])。
• CSS 属性选择器适用于 IE7 及更高版本。但是，IE7 和 IE8 对 !DOCTYPE 声明有些敏感，因此您必须确保您的页面具有有效的 !DOCTYPE 声明。
• 旧版浏览器(例如 IE6)不支持此功能，因此您仍然会看到替代文本。
• 假设 CSS 分辨率实际上是您所要求的，并且 - 和以前一样 - 图像所在的背景确实是白色的!

您可以扩展属性选择器的使用，以简单地确保那些通过 src="null" 传递的图像根本不会显示:

img[src="null"]{
    display: none;
}