Chrome/IE9 で見つけにくい画像の境界線を削除する

Chrome または IE9 で画像を表示すると、設定にもかかわらず細い境界線が永続的に表示される場合があります。 CSSの「outline: none」と「border: none」。この問題は、「border: none」をオーバーライドする Chrome の特有の動作が原因で発生します。

これに対処するには、画像の幅と高さを 0px に設定し、対応するピクセル値をパディングするという賢いテクニックを使用できます。希望のボタンサイズに合わせます。次の 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;
}

これらのサイズでは表示されるコンテンツが存在しないと Chrome を騙すことで、効果的に境界線を削除できます。この技術により、さまざまなブラウザ間での互換性が保証され、Chrome で見苦しい境界線なしで画像を表示できるようになります。