CSS と jQuery を使用しているにもかかわらず、Chrome と IE9 で画像に枠線が表示されるのはなぜですか?

Chrome および IE9 での画像の境界線の問題を解決する

このスレッドは、Chrome および Internet Explorer 9 で画像の周囲に目立つ境界線が表示される問題を解決します。 CSS と jQuery を使用して削除しようとしても。

指定された CSS コード:

<code class="css">outline: none;
border: none;</code>

は、アウトラインとボーダーの両方を無効にし、border=0 属性がすべてのイメージ タグに追加されます。ただし、境界線は依然として残ります。

この問題の根本的な原因は、border:none; を無視する Chrome のバグです。スタイル。回避策として、表示するコンテンツがないと Chrome を騙す必要があります。 CSS ID ブロックを使用した解決策は次のとおりです。

<code class="css">#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;
}</code>

これにより、画像のサイズがゼロに設定されますが、実際の画像の寸法によるパディングが含まれます。 Chrome は、ボタンの背景画像用のスペースを残しておきながら、画像が存在しないと事実上騙されます。このソリューションは、Chrome と他のブラウザの両方で不要な輪郭と境界線を除去します。

以上がCSS と jQuery を使用しているにもかかわらず、Chrome と IE9 で画像に枠線が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。