当前位置: 首页 > Web前端 > CSS

解决IE模式下背景图不显示的问题

时间:2023-03-30 14:58:36 CSS

初衷是给提交按钮添加背景图,使用如下CSS样式:.subtninput{background-attachment:scroll;background-image:url(images/btn.gif);background-repeat:no-repeat;background-position:0px0px;height:20px;width:60px;问题是背景图片按钮在InternetExplorer6、7、8无法显示,依然是默认的按钮形式,但是在Firefox和Chrome中可以正常显示,可以排除图片链接的有效性,我试过修改多次,都没有成功,后来用background简写属性,一条语句设置所有的背景属性,在InternetExplorer中可以正常显示:.subtninput{background:url(images/btn.gif)no-repeatscroll0px0px;height:20px;width:60px;border-style:none;}一开始我怀疑是不是我的网页代码特殊,其他代码可能影响了样式,后来我单独创建了一个.html,里面只有我写了一个表单,一个输入框,一个提交框。使用上面background属性单独写的css属性后,问题依旧,说明这是一个通病!CSS文档中提到:通常建议使用速记属性而不是单独使用单个属性,因为速记属性在较旧的浏览器中得到更好的支持并且需要更少的字母来键入。但我认为现在的问题不是旧浏览器版本的问题,而是InternetExplorer的问题。浏览器能正常显示是个奇怪的现象。最后在网上找到了这样一段话:IE图片格式问题会导致IE无法显示图片。对于IE,直接改后缀名会导致图片无法显示。如果后缀名与文件本身的格式不匹配,也会显示失败。Firefox和这些浏览器不会受到影响,它们可以自己识别。道理很清楚,我在CSS中改了一张图片,没问题,IE和Firefox都能显示。没想到IE这么脆弱。如果你说这是罢工,那就是罢工。链接图片的后括号和定位值必须加一个空格,如:url(images/bg_media_lihover.gif)5px6pxno-repeat#00a1de。为了保证背景图片能够正常显示,建议使用绝对路径,而不是相对CSS的路径。或者莎士比亚说得好:“一千个InternetExplorer中有一千个BUG”。背景:url(../images/in_bon_02.png)无重复滚动00rgba(0,0,0,0);IE不显示它是rgba(0,0,0,0)的原因。附录阅读原文:https://blog.mazey.net/1955.html