Why Do Images Still Have Borders in Chrome and IE9, Even with \'border: none;\'?

Chrome and IE9 Border Suppression Techniques

Removing the unsightly border that persists around images in Chrome and IE9 can be a frustrating task. Despite setting border properties to "none," these browsers stubbornly maintain a thin line.

Potential Causes and Solutions:

• Chrome Bug: Chrome ignores the "border:none;" style, particularly for images with specific dimensions. To circumvent this, trick Chrome into perceiving no image presence by assigning zero width and height, coupled with precise padding values to accommodate the desired image size.
• IE9 Behavior: IE9 adds a pixel-thin selection border around images when the image is clicked. To eliminate this, disable the "user-select" property.

Example Implementation:

CSS for Chrome Bug:

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

CSS for IE9 Selection Border:

<code class="css">img {
    -ms-user-select:none;
    user-select:none;
}</code>

Additional Tips:

• Ensure the image is not wrapped in any other elements with borders.
• Check for vendor prefixes that may be influencing the border appearance.
• Try disabling hardware acceleration temporarily to see if it affects the border behavior.

The above is the detailed content of Why Do Images Still Have Borders in Chrome and IE9, Even with \'border: none;\'?. For more information, please follow other related articles on the PHP Chinese website!