IE模式下背景图片不显示
初衷是想给这个提交按钮<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)的原因。
最新文章
- linux yum安装jdk
- URAL 1549 Another Japanese Puzzle(构造)
- 三分套三分 --- HDU 3400 Line belt
- CPU信息查询
- 2013-10-25笔记,css: mini-width, 标准居中,样式中*号使用,背景图像位置定位
- java笔试题(4)
- 我的总结SVN的使用
- js关闭页面(兼容浏览器)
- 单纯形法C++实现
- hdoj 1201 18岁生日
- 我为什么放弃了win7系统
- Linux CPU 亲和性
- [转]ARM/Thumb2PortingHowto
- Android init.rc文件浅析
- Delphi制作图像特殊显示效果
- window server2012 许可证过期
- Docker - 生成镜像
- Linux 安装源码软件
- 【错误】IntelliJ IDEA使用Gradle编译报错
- 网页启用Gzip压缩 提高浏览速度