Home > Web Front-end > CSS Tutorial > Why Does My Image Still Have a Border in Chrome and IE9 Despite Using CSS and jQuery?

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

DDD
Release: 2024-11-02 20:13:02
Original
478 people have browsed it

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template