Home >Web Front-end >CSS Tutorial >Why Does My Image Still Have a Border in Chrome, Even With `border: none;`?
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:
<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>
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.
<code class="css">img, a img { outline: none; border: none; }</code>
<code class="js">$(document).ready(function(){ $('img').attr('border', '0'); });</code>
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.
The above is the detailed content of Why Does My Image Still Have a Border in Chrome, Even With `border: none;`?. For more information, please follow other related articles on the PHP Chinese website!