Why Does My Image Still Have a Border in Chrome and IE9 Despite Using CSS and jQuery?

Fixing Image Border Issue in Chrome and IE9

This thread addresses an issue where a noticeable border appears around images in Chrome and Internet Explorer 9 despite attempts to remove it using CSS and jQuery.

The provided CSS code:

<code class="css">outline: none;
border: none;</code>

disables both outline and border, while a border=0 attribute is added to all image tags. However, the border still persists.

The root cause of this issue is a bug in Chrome that disregards the border:none; style. As a workaround, we need to trick Chrome into believing there is no content to display. Here's a solution using a CSS ID block:

<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>

This sets the image's size to zero but includes padding with the dimensions of the actual image. Chrome is effectively tricked into thinking there is no image while leaving space for the button's background image. This solution eliminates the unwanted outline and border in both Chrome and other browsers.

The above is the detailed content of Why Does My Image Still Have a Border in Chrome and IE9 Despite Using CSS and jQuery?. For more information, please follow other related articles on the PHP Chinese website!