「border: none;」を指定しても、Chrome と IE9 で画像に枠線が表示されるのはなぜですか?

Chrome および IE9 の境界線抑制テクニック

Chrome および IE9 で画像の周囲に残る見苦しい境界線を削除するのは、面倒な作業になる場合があります。境界線のプロパティを「なし」に設定しているにもかかわらず、これらのブラウザは頑固に細い線を維持します。

考えられる原因と解決策:

• Chrome のバグ: Chrome は「border:none;」を無視します。スタイル、特に特定のサイズの画像の場合。これを回避するには、目的の画像サイズに合わせて正確なパディング値と組み合わせて、幅と高さをゼロに割り当て、画像が存在しないことを Chrome に認識させます。
• IE9 の動作: IE9 はピクセルを追加します。画像をクリックすると、画像の周囲に細い選択枠が表示されます。これを解消するには、「user-select」プロパティを無効にします。

実装例:

Chrome の CSS バグ:

<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>

IE9 選択用の CSS境界線:

<code class="css">img {
    -ms-user-select:none;
    user-select:none;
}</code>

追加のヒント:

• 画像が境界線のある他の要素で囲まれていないことを確認してください。
• 境界線の外観に影響を与えている可能性のあるベンダー プレフィックスを確認してください。
• 試してください。ハードウェア アクセラレーションを一時的に無効にして、境界線の動作に影響するかどうかを確認します。

以上が「border: none;」を指定しても、Chrome と IE9 で画像に枠線が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。