CSS以避免在打印预览中显示图像alt文本

Question

在IE 8中，我看到当图像没有显示时，打印预览中会显示替代文字。镀铬中没有出现问题。 我想在IE 8中解决这个问题。

图像的Src在运行时添加。 有时，服务器无法使用图像

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

需要修复而不使用javascript

Answer 1

你不能直接设置alt文本的样式，但它会从img parent继承，所以最简单的方法就是在CSS中简单地将img的color设置为白色（如果是打印应用程序，则在你的打印样式中）。

尝试这个：

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

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

正如本答案下面的评论中所提到的，您可以使用CSS 属性选择器来仅定位那些以'null'作为源的imgs。

这将是这样的：

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;
}

Answer 2

对于mozilla：研究此代码并找到与其他浏览器实现它的方法。

img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
    content: -moz-alt-content !important;
    unicode-bidi: -moz-isolate;
}

或者，一些绝对基本的内联javascript，一些非常丑陋的老式内联事件处理程序：

<img src="broken.png" onerror="this.style.display='none'" />