16

誰でもこれについて私にアドバイスできますか？WebKit ブラウザは、無効な画像の周りに灰色の 1 ピクセルの境界線を配置し続けます。これを削除する必要があるのは、電子メール クライアントで画像が無効になっている場合の電子メールの最適化のためです。Firefox では正常に動作しますが、WebKit ブラウザーでは境界線が表示され続けます。

border:none !importantインラインも含めていろいろ試してみましたが、Chrome/Safariは頑固です。

編集：これはインラインcssを含むサンプルhtmlです

<img style="outline:none;text-decoration:none;display:block;border:none;-webkit-border:0;" border="0" src="images/rm_bnk.gif" width="10" height="10" alt="test" />
4

6 に答える 6

22

Amit の答えは素晴らしいですが、ちょっとしたアドバイスです。表示の代わりに: なし;

img:not([src]) {
   visibility: hidden;
}
  • そのため、img ブロックのサイズと他の要素の配置を保存できます。ほとんどの場合、それは便利です。私は自分のサイトで画像を遅延ロードして使用し、画像が読み込まれる前に空白のブロックのみを表示します。
于 2015-12-10T15:22:52.737 に答える
3

ブラウザは、その境界線を削除する方法を実際に提供していないようです。最も簡単な解決策は、img を div に変更し、画像を背景として適用することです。

そうすれば、src がない場合、壊れた画像のアイコンと境界線は表示されません。

更新: Microsoft Outlook は物事を困難にし、治療法は病気よりもほとんど悪いものです: ベクトル マークアップ言語、形状要素、画像データ要素など。 com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Outlook ユーザーは、1 日で終了できるように、画像なしで移動する必要がある場合があります。

于 2012-10-31T04:49:27.753 に答える
0

JavaScript を使用して壊れた画像を削除してみてください。それが唯一の方法です

var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
    var self  = images[i];
    self.onerror = function () {
        self.parentNode.removeChild(self);
    }
}

壊れた画像のレンダリングはブラウザによって異なり、変更できなかったためです。

PS:onerror画像が読み込まれていないときに起動します

于 2012-10-31T04:47:45.397 に答える