解决 IE 模式下背景图片不显示

Posted 2021-09-28 Mazey

初衷是想给这个提交按钮 <input type="submit" value=" /> 加上背景图片，用了以下 CSS 样式：

.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;
}

但是不知道是怎么回事，在 Internet Explorer 6、7、8 中皆无法显示该背景图片按钮，依然是默认的按钮形式，而在 Firefox 和 Chrome 中皆可以正常显示，可以排除图片链接的有效性，尝试修改了很多次都没有成功。后来使用 background 简写属性，在一个声明中设置所有的背景属性，在 Internet Explorer 居然可以正常显示了：

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

刚开始我在想是不是我的网页代码存在特殊性，其他代码可能影响了该样式，但是后来我单独新建了一个 .html，里面只写了个 form，一个输入框，一个提交框，在使用上面的 background 属性分开写的 CSS 属性后，结果问题依旧，可以说明这是一个普遍性的问题！CSS 文档中有提到：

通常建议使用简写属性，而不是分别使用单个属性，因为简写属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

但是我想现在的问题已经不是浏览器版本老的问题了，而是 Internet Explorer 的问题了。

浏览器能正常显示的怪现象。最后我在网上找到了这段话：IE 图片格式问题会导致 IE 无法显示图片。对于 IE 来说，直接改后缀名会导致图片不能显示。如果后缀名跟文件自身的格式不相符合，也是一样会无法显示。Firefox 这些浏览器不会有影响，他们可以自己识别。真相大白了，在 CSS 里换了一张图片，没问题了，IE 和 Firefox 都能显示了。没想到 IE 这么脆弱，说罢工就罢工。

链接图片的反括号和定位值一定要加个空格，如：url(images/bg_media_lihover.gif) 5px 6px no-repeat #00a1de。

为了保证背景图片能够正常显示，建议使用绝对路径，而不是相对于 CSS 的路径。还是莎士比亚说得好：“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 不显示原来是 rgba(0, 0, 0, 0) 的原因。

附录

阅读原文：https://blog.mazey.net/1955.html