web-dev-qa-db-ja.com

画像の周りのクロム/サファリディスプレイの境界線

ChromeとSafariは画像の周囲に境界線を表示していますが、境界線は必要ありません。 Mozillaには国境はありません。 CSSとHTMLを調べましたが、それを修正しているものが見つかりません。

コードは次のとおりです。

<tr>
  <td class="near">
    <a href="../index.html"class="near_place">
      <img class="related_photo" />
      <h4 class="nearby"> adfadfad </h4>
      <span class="related_info">asdfadfadfaf</span>
    </a>
    ...

CSS：

a.near_place {
    border: none;
    background: #fff;
    display: block;
}

a.near_place:hover{
    background-color: #F5F5F5;
}

h4.nearby {
    height: auto;
    width: inherit;
    margin-top: -2px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    display: inline;
}

img.related_photo {
    width: 80px;
    height: 60px;
    border: none;
    margin-right: 3px;
    float: left;
    overflow: hidden;
}

span.related_info {
    width: inherit;
    height: 48px;
    font-size: 11px;
    color: #666;
    display: block;
}


td.near {
    width: 25%;
    height: 70px;
    background: #FFF;

}

申し訳ありませんが、以前に古いコードをコピーしました。これが私に問題を引き起こしているコードです

前もって感謝します

htmlcssgoogle-chromesafarimozilla
22
golf_nut

これがChromeのバグであるかどうかはわかりませんが、画像が見つからない場合、画像のURLが壊れている場合、またはあなたの場合のようにsrcの場合は、灰色の境界線が表示されます画像に適切なURLを指定し、ブラウザがそれを検出すると、境界線が消えます。画像にsrcがない場合は、高さと幅を削除する必要があります。

42
sarcastyx

sarcastyxは正しいですが、回避策が必要な場合は、幅と高さを0に設定し、画像用のスペースを作るためにパディングを設定できます。

36x36のアイコンが必要な場合は、幅と高さを0に設定し、padding：18pxを設定できます。

12
Gonzalo
.related_photo {
   content: '';
}
5
Andrii Katsiubka

私はそれが古い質問であることを知っています。しかし、別の解決策は、srcを1x1透明ピクセルに設定することです。

<img class="related_photo"
     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

これは私にとってはうまくいきます。

5
raphaëλ

これは、余分なHTTPリクエストを回避するために、画像がcssによって動的に（たとえば http://webcodertools.com/imagetobase64converter ）植えられた場合に発生する可能性があります。この場合、パフォーマンスの問題のため、デフォルトのイメージは必要ありません。 imgタグからdivタグに切り替えることで解決しました。

3
Druvision
img[src=""]{
    content: "";
}
2
Ben

私はこの問題を次のように修正しました：

<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">

right: 15pxは画像を表示したい場所ですが、好きな場所に配置できます。

0
Sebas Palacio Florez

Src = "trans.png"を追加しました。trans.pngは、フォトショップの100x100の透明な背景pngです。国境のない魅力のように働いた

0
seca400
img.related_photo {
  width: 80px;
  height: 60px;
  **border: solid thin #DFDFDF;** //just remove this line
  margin-right: 3px;
  float: left;
  overflow: hidden;
}
0
maga

img.related_photo内で、border: solid thin #DFDFDF;をborder: 0に変更する必要があります。

0
thirtydot