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

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

Chrome および IE9 で画像を操作するときに頻繁に発生する問題の 1 つは、永続的な細い境界線の表示です。 「outline: none;」を指定したにもかかわらず、画像の周囲におよび「境界線: なし;」 CSSで。この問題を解決するには、次の方法を検討してください。

Chrome のバグ回避

Chrome には、「border: none;」を無視する既知のバグがあります。スタイル。これを回避するには、次の CSS ID ブロックを使用して必要なパディングを含む透明領域を作成し、Chrome を効果的に騙して画像が存在しないと思わせます:

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

スタイルの重複

もう 1 つの解決策は、CSS と jQuery の border=0 属性の両方で境界線と輪郭の削除スタイルを複製することです。この冗長なアプローチにより、ブラウザにスタイルを正しく適用することが強制される場合があります。

<code class="css">img, a img {
    outline: none;
    border: none;
}</code>

<code class="js">$(document).ready(function(){
    $('img').attr('border', '0');
});</code>

追加の考慮事項

画像ファイルのサイズが画像ファイルのサイズと一致していることを確認してください。 CSSで幅と高さを指定します。不一致がある場合、ブラウザは枠線を追加して補正することがあります。

これらのソリューションを実装することで、Chrome と IE9 で不要な画像の枠線を効果的に削除し、Web ページに一貫した見た目の良い外観を提供できます。 .

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