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