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

12次阅读

共计 1240 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0