Question

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

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

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

需要修复而不使用javascript

Answer 1

您无法直接设置alt文本的样式，但它会从img父项继承，因此最简单的方法是将color的{{1}}设置为白色CSS（如果是打印应用程序，则在您的打印样式中）。

试试这个：

img

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

正如以下评论中提到的这个答案，您可以使用CSS attribute selector来定位那些以background-color为源的imgs。

这可以这样工作：

'null'

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

src确实是'null'，而不仅仅是一个ampty字符串（在这种情况下你可以使用img[src="null"]{ color: #fff; background-color: #fff; }）。
CSS属性选择器适用于IE7及更高版本。但是，IE7和IE8对于img[src=""]声明来说有点微妙，所以你必须确保你的页面有一个有效的!DOCTYPE声明。
较旧的浏览器（例如IE6）不支持此功能，因此您仍然可以获得替代文字。
假设CSS分辨率实际上是你所要求的，并且 - 和之前一样 - 图像所在的背景确实是白色的！

您可以使用属性选择器进行扩展，以确保完全不显示!DOCTYPE中出现的图像：

src="null"

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'" />

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

2 个答案: