ホームページ >ウェブフロントエンド >CSSチュートリアル >「border: none;」を指定しても、Chrome で画像に枠線が表示されるのはなぜですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-11-02 19:12:02248ブラウズ

Why Does My Image Still Have a Border in Chrome, Even With `border: none;`?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。