web-dev-qa-db-ja.com

Chrome / IE9で画像の境界線を削除する

Chrome＆IE9のすべての画像に表示される細い境界線を削除しようとしています。このCSSがあります。

outline: none;
border: none;

JQueryを使用して、border=0すべての画像タグの属性。ただし、画像に示されている境界線は引き続き表示されます。解決策はありますか？

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>

添付のスクリーンショットをご覧ください：

Screenshot

cssimagegoogle-chromestylesheetborder
50
Prasad

の代わりに border: none;またはborder: 0;あなたのCSSでは、あなたが持っている必要があります：

border-style: none;

次のように画像タグにこれを置くこともできます。

<img src="blah" style="border-style: none;">

画像にsrcが含まれていない限り、どちらも機能します。上記は、ボーダーがニースを再生することを拒否する一部のブラウザで表示されるこれらの厄介なリンクボーダー用です。 srcがない場合に表示される細い境界線は、chrome=は、定義したスペースに画像が実際に存在しないことを示しているためです。この問題が発生している場合は、次のいずれか：

  • 使う <div>の代わりに<img>要素（背景画像で効果的に要素を作成するだけで、とにかく<img>タグは実際には使用されていません）
  • 必要な場合/ <img>タグは以下のRandy Kingのソリューションを使用します
  • 画像を定義するsrc
51
Zach

これはChromeバグで、 "border：none;"スタイルを無視します。

サイズが102x86ピクセルの「download-button-102x86.png」という画像があるとします。ほとんどのブラウザでは、幅と高さのためにそのサイズを予約しますが、Chromeは、あなたが何をしようと、そこに境界線を描くだけです。

だから、Chrome=そこに何もないと考えるようにだまします-0px x 0pxのサイズですが、ボタンを許可するための正確な量の「パディング」を使用します。私はこれを達成するために使用しています...

#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

出来上がり！どこでも動作し、Chromeの輪郭/境界線を取り除きます。

52
Randy King

Srcが空の場合、またはsrcがない場合に境界を取り除きたい場合は、このスタイルを使用します。

IMG[src=''], IMG:not([src])      {opacity:0;}

Srcを追加するまでIMGタグを完全に隠します

18
John

Imgタグに属性border = "0"を追加します

6
Amareswar

Uがsrcを定義しなかった場合、またはimgタグのsrc属性が空の場合、ほとんどのブラウザーは境界線を作成します。これを修正するには、srcとして透明画像を使用します。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
4
code19

Chromeイメージのロードに関するバグを修正しようとしているが、プレースホルダイメージの使用をロードする場合（たとえば、レイジーロードイメージを使用）使用するには、このトリックを行うことができます。

.container { overflow: hidden; height: 200px; width: 200px }

.container img { width: 100%; height: 100% }

.container img[src=''],
.container img:not([src]) {
  width: 102%;
  height: 102%;
  margin: -1%;
}

これにより、コンテナのオーバーフローで境界線が非表示になり、表示されなくなります。

これを回します： Chrome border bug

これに： Chrome border bug fixed

3
aaron-coding

chromeは "border：none"スタイリングを無視しますが、理解するのが少し複雑で、ie6以前のブラウザでは動作しません。これを行うことができます：

css：

ins.noborder
{
    display:block;
    width:102px;
    height:86px;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

html

<ins class="noborder"></ins>

Insタグを使用して「」で閉じる場合は、フォーマットがファンキーに見えることを確認してください。

2
sksallaj

Text-indentを非常に大きな数に設定することで境界線を削除できますが、画像のaltもなくなります。これを試して

img:not([src]) {
    text-indent: 99999px !important;
}
1
Hoang Trung

インラインcss

<img src="logo.png" style="border-style: none"/>
1
user2645981

border = "0"を使用すると効果的な方法ですが、各画像にこの属性を追加する必要があります。

次のjQueryを使用して、各画像にこの属性を追加しました。これは、このアウトラインと画像の周囲の境界線が嫌いだからです。

$(document).ready(function () {
        $('img').each(function () {
            $(this).attr("border", "0");
        });
    });
1
OldTrain

Img srcタグで、border = "0"を追加します（例：<img src="img.jpg" border="0">上記の@Amareswarによる説明

1
doodoodukes

それは私のために働いた。それは私を夢中にさせた数日かかりました。

img.logo
{
    display:block;
    width:100%;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
}
0
vahid sabet

@ aaron-codingと@ randy-kingが持っていたものと同じ-しかし、ロードされる前にイメージの境界を隠すためのより一般的なもの（つまり lazy-load.js または何か

（明らかに元のコメントではコードブロックを実行できません）

.lazy-load-borderFix {
  display: block;
  width: 1px !important;
  height: 1px !important;
  outline: none;
  padding: 0px;
  margin: -4px;
  background-image:none !important;
  background-repeat:no-repeat;
}
0
rwcorbett

Divタグで.png画像を表示するときに、同様の問題が発生しました。画像の横に細い（1 pxと思う）黒い線がレンダリングされました。修正するには、次のCSSスタイルを追加する必要がありました：box-shadow: none;

0
Zerato

パディングスタイルを使用して修正します。

#picture {
    background: url("../images/image.png") no-repeat;
    background-size: 100%;
}

.icon {
    height: 30px;
    width: 30px;
    padding: 15px;
}

パディング値を増やしている間、境界線は消えています。独自の価値を見つけてください。

0
Alexandr