css - 画像の代替テキストが印刷プレビューに表示されないようにする CSS

Question

IE 8 では、画像が表示されないときに代替テキストが印刷プレビューに表示されます。この問題はクロムでは発生していません。この問題を IE 8 で修正したいと考えています。

イメージのソースは実行時に追加されます。サーバーから画像が利用できない場合があります

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

JavaScript を使用せずに修正が必要でした

score 1 · Accepted Answer

代替テキストを直接スタイル設定することはできませんが、img親から継承されるため、おそらく最も簡単な方法は、CSS でを白に設定することcolorですimg(印刷アプリケーションの場合は、印刷スタイル内で)。

これを試して：

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

その例では、も白に設定しましたbackground-colorが、これが印刷スタイルである場合、いずれにしても背景が必然的に白になることを考えると、これはおそらく 100% 必要ではありません。

この回答の下のコメントで述べたように、CSS属性セレクター'null'を使用して、ソースとして持つ img のみをターゲットにできる場合があります。

これは次のように機能します。

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

ただし、これにはいくつかの追加の要件/仮定が伴います。

src が実際には 'null' であり、空っぽの文字列 (この場合はを使用できますimg[src=""]) ではありません。
CSS 属性セレクターは IE7 以降で機能します。ただし、IE7 と IE8 は宣言に対して少しデリケートな!DOCTYPEため、ページに有効な!DOCTYPE宣言があることを確認する必要があります。
古いブラウザー (IE6 など) はこれをサポートしていないため、代替テキストは引き続き表示されます。
CSS 解像度が実際に求めているものであり、前と同様に、画像が置かれている背景が実際に白であると仮定します!

この属性セレクターの使用を拡張して、通過する画像src="null"がまったく表示されないようにすることができます。

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

2 に答える 2