Solve the problem that the background picture does not display in IE mode

It was designed to give the submit button to <input type="submit" value=" />add a background image, use the following CSS styles:

.subtn input {
    background-attachment: scroll;
    background-image: url(images/btn.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    height: 20px;
    width: 60px;
    border-style: none;
}

But I don’t know what’s going on. The background picture button cannot be displayed in Internet Explorer 6, 7, and 8. It is still the default button form, but it can be displayed normally in Firefox and Chrome. The validity of the picture link can be excluded. , I tried to modify it many times without success. Later, using the backgroundshorthand property, setting all background properties in one declaration, was able to display properly in Internet Explorer:

.subtn input {
    background: url(images/btn.gif) no-repeat scroll 0px 0px;
    height: 20px;
    width: 60px;
    border-style: none;
}

At first I think it is not the presence of the special nature of my page code, other code that may affect the style, but then I built a single .html, which only wrote form, an input box, a submission box, use the above backgroundproperty After writing the CSS properties separately, the problem remains the same, which shows that this is a common problem! It is mentioned in the CSS documentation:

It is generally recommended to use shorthand properties instead of using individual properties separately, because shorthand properties are better supported in older browsers and require fewer letters to be typed.

But I think the problem now is not the problem of the old browser version, but the problem of Internet Explorer.

The strange phenomenon that the browser can display normally. Finally, I found this paragraph on the Internet: IE picture format problems will cause IE to fail to display pictures. For IE, directly changing the suffix name will cause the picture to not be displayed. If the suffix name does not match the format of the file itself, the same will not be displayed. Browsers such as Firefox will not be affected, they can identify themselves. The truth became clear, I changed a picture in CSS, no problem, IE and Firefox can display it. I didn't expect IE to be so fragile, so I went on strike when I said strike.

Link image anti brackets and positioning value must be added spaces, such as: url(images/bg_media_lihover.gif) 5px 6px no-repeat #00a1de.

In order to ensure that the background image can be displayed normally, it is recommended to use an absolute path instead of a path relative to the CSS. Shakespeare said it well: "There are a thousand BUG in a thousand Internet Explorer".

background: url(../images/in_bon_02.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);

IE does not display the original rgba(0, 0, 0, 0)cause.

appendix

Read the original text:https://blog.mazey.net/1955.html