乐趣区

关于css:解决-IE-模式下背景图片不显示

jiezi

初衷是想给这个提交按钮 <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

退出移动版