誰でもこのことについて私に助言できますか？ WebKitのブラウザでは、無効な画像の周りに灰色の1ピクセルの枠線が表示されます。これを削除する必要があるのは、電子メールクライアントが画像を無効にしたときの電子メールの最適化です。 Firefoxでは正常に動作しますが、WebKitブラウザは境界線を表示し続けます。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" />
削除する方法はありませんが、スタイルのオーバーフロー隠しプロパティを持つ要素にイメージをラップしました。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hide Broken Image border</title>
<style>
body{
background-color:azure;
}
.image-container{
width:100px;
height:100px;
overflow:hidden;
display:block;
background-color:orange; /*not necessary, just to show the image box, can be added to img*/
}
.image-container img{
margin:-1px;
}
</style>
</head>
<body>
<span class="image-container">
<img src="path-to-image" alt="I'm Broken :(" width="102" height="102">
</span>
</body>
</html>
imgsrcが存在しないか、そして、imgsrcまで、このCSSの非表示イメージが完全にロードされていないcssコード
img:not([src]){ display:none; }
の下に使用して壊れている場合、このビン http://jsbin.com/OpAyAZa/1/edit
いいね、私は電子メールクライアントの間でそれをテストさせてください –
が壊れた画像を削除するには、いくつかのJavaScriptを使用してみてくださいです。唯一の方法です。
var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
var self = images[i];
self.onerror = function() {
self.parentNode.removeChild(self);
}
}
壊れた画像のレンダリングはブラウザによって異なり、変更できませんでした。
P.S：onerrorはイメージがロードされていない場合
ありがとうございますが、これは電子メール用ですので、JavaScriptは利用できません。 –
その後、hilsonsソリューションを試してください。それはもっと良いアイデアです – naveen
ブラウザが本当にあなたにその境界線を削除する方法を提供していないようです起動します。あなたの最も簡単な解決策は、imgをdivに変更し、その画像を背景として適用することです。
このようにして、srcがない場合、壊れたイメージアイコンとボーダーは取得されません。
アップデート：Microsoft Outlookのは、物事を困難にし、そして治療は病気よりも、ほぼ悪化している：あなたがそれらをhttp://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/
を使用する方法を参照してくださいよ、あなたの周りグーグル場合など、ベクターマークアップ言語、形状要素、画像データ要素、Outlookユーザは、画像なしで1日と呼ぶことができます。
ええ、これは考えましたが、メールは背景イメージがあまり好きではありません（Outlookはこれの主な原因です） –
クール、私はこれを受け入れて、WebkitをオーバーライドするためのCSSハッキングを望んでいましたデフォルトCSS。 –
を見てみましょう。
ありがとう、しかし私たちはどのように擬似スタイルをインライン化するのですか？ –
Amitの答えはちょうどいいですが、小さな助言： use visibility：hidden; の代わりにディスプレイ：なし;
img:not([src]){
visibility: hidden;
}
ありがとうございます！これは私のために働いた唯一のものです:) – Michael
これは、遅延読み込みを使用する場合に最適なソリューションです。 –
このコードを試して、Webkitの壊れた画像の周りの枠線を削除することができます。
var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++) {
var self = images[i];
self.onerror = function() {
self.parentNode.removeChild(self);
}
}
to -webkit-border：0; –
table、img {-webkit-border：0！important;}のような意味ですか？まだ動かない。 –
あなたのコードを表示することができますhtmlまたはcss –