How to Remove Persistent Image Borders in Chrome and IE9?

Removing the Elusive Image Border in Chrome/IE9

When displaying images in Chrome or IE9, you may encounter a persistent thin border despite setting "outline: none" and "border: none" in CSS. This issue arises due to a peculiar Chrome behavior that overrides "border: none."

To counteract this, you can employ a clever technique that involves setting the image width and height to 0px while padding it with pixel values corresponding to the desired button size. Consider the following CSS example:

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

By tricking Chrome into believing there's no visible content at these dimensions, you effectively eliminate the border. This technique ensures compatibility across various browsers and allows you to display images without unsightly borders in Chrome.

The above is the detailed content of How to Remove Persistent Image Borders in Chrome and IE9?. For more information, please follow other related articles on the PHP Chinese website!