Chrome と IE9 で不要な画像の境界線を削除する方法

Chrome および IE9 で画像の境界線を削除する

Web 用にデザインする場合の課題の 1 つは、さまざまなブラウザー間で一貫した視覚的なプレゼンテーションを確保することです。ただし、Chrome や IE9 で画像の周囲に不要な境界線が表示されるなど、特定の問題が発生する可能性があります。

この境界線を除去するには、outline: none や border: none などの CSS プロパティを使用しようとした可能性があります。しかし無駄でした。これは、Chrome には border: none スタイルを無視する既知のバグがあるためです。

この問題を解決する鍵は、Chrome をだまして画像に寸法がないと認識させることです。幅と高さが 0px の要素を作成し、適切なパディングを追加して目的の画像サイズを補うことでこれを実現できます。

この回避策を実行するための 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>

この方法は、目的の画像サイズを維持しながら、Chrome の輪郭と境界線を効果的に削除します。

以上がChrome と IE9 で不要な画像の境界線を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。