Removing the Image Border in Chrome

One frequent issue encountered when working with images in Chrome and IE9 is the appearance of a persistent thin border around the image, despite specifying 'outline: none;' and 'border: none;' in the CSS. To resolve this issue, consider the following approaches:

Chrome Bug Circumvention

Chrome has a known bug that ignores the "border: none;" style. To work around this, use the following CSS id block to create a transparent area with the desired padding, effectively tricking Chrome into thinking there's no image:

#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;
}

Duplication of Styles

Another solution is to duplicate the border and outline removal styles, both in CSS and via jQuery's border=0 attribute. This redundant approach can sometimes force the browser to apply the styles correctly.

img, a img {
    outline: none;
    border: none;
}

$(document).ready(function(){
    $('img').attr('border', '0');
});

Additional Considerations

Ensure that the dimensions of the image file match the specified width and height in CSS. If there is a discrepancy, the browser may add a border to compensate.

By implementing these solutions, you can effectively remove the unwanted image border in Chrome and IE9, providing a consistent and visually pleasing appearance for your web pages.