H5W3
当前位置:H5W3 > 其他技术问题 > 正文

css背景图片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的问题了。

— 完 —

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜博客 https://www.ludou.org/css_background.html

很有用的资料哦
呵呵
谢谢博主的分享

@jfdba 不客气!

新年快乐!

@淘好 嗯,春节快乐!

今天也遇到了这个问题,不过我是直接用的,图片总共有四张,结果firefox可以正常显示,在IE6下面有两张可以显示,另外两张打叉,格式都是jpg的。大小是250k左右。

@Tsunami 我又遇到这样的问题了,不过这次不太一样,上次是JPG格式,我把图片重新保存了一下,把保存的质量提高了之后就能显示,这次是png图片,重新保存不解决问题,不过用下面的方法,把背景图片的反括号和位置加一个空格,问题就解决了

如果你是直接用的<img>,而图片显示不出来的话,也可能是你用的别人的图片,被人防盗链限制了!

我也遇到了和您差不多的问题,只不过这次真的是在图片上,在ie系列里图片显示不出来,我用的css就是background:url(1.gif)no-repeat;就是简写,在firefox3和Chrome里显示的好好的,在ie里就是无法显示,现在问题也没有解决,清了缓存都不行。

@第三方· 这个我还真的没遇到过。也可能是你用记事本来编写代码的原因,你试试用UltraEdit或Dreamweaver之类的文本编辑器打开网页文件,再用无BOM格式另存一下,看问题能不能解决。

另外如果你的问题解决了,还请介绍一下你的经验哦。

@Ludou 哈哈,今天真是好运气,问题解决了,我就是用Dreamweaver来编写的,我之前也和想的
差不多。我之前有一个1.gif的图片,然后我想让另一张图片替代它,也把那张图片改成
了1.gif,当然路径不在一起,然后导入图片,就发生了之前的ie怎么也显示不了,其他
浏览器能正常显示的怪现象。最后我在网上找到了这段话:IE图片格式问题会导致IE无法显示图片。对于IE来说,直接改后缀名会导致图片不能显示。如果后缀名跟文件自身的格式不相符合,也是一样会无法显示。firefox这些浏览器不会有影响,他们可以自己识别。
真相大白了,在css里换了一张图片,没问题了,ie和firefox都能显示了。没想到ie这么
脆弱,说罢工就罢工。

@第三方· 恭喜恭喜,多谢分享!

可是.. 我遇到了一个更抽像的问题,引用一个CSS文件,那个文件里只为Body设置了底色,在FF下正常,在IE6下也却出现了你们讲到的这种类似现象。。 可是我的不是图片只是背景色呀?哎,,不理解啊。。。在此希望可以得到大家的指点。 ^_^

@sinianYY 嘿~~ 问题解决了, 是CSS文件编码的问题。。

@sinianYY 文件编码确实是很多网页设计者经常忽略的问题。

刚刚碰到这个问题,网上搜了下没解决,
哈自己研究了下解决了,原来是链接图片的反括号和定位值一定要加个空格,
如url(images/bg_media_lihover.gif) 5px 6px no-repeat #00a1de;
。。。。。哎太冤枉了就为个空格键折腾了半天

@sg 哥们,你太牛了,小弟我真的是要佩服死了,我也遇到这样的问题,弄了很久也没弄出来,啊 感谢啊 感谢啊

@tianhandigeng 哎呦喂!
这个问题 困扰我到现在,凌晨1点46分!
空格 ,我的天!
多谢楼上的!

@sg 你太牛了,哥谢你了

@第一滴泪 哈哈 太谢谢了

@sg 太特么对了。我搞了半天也是这个问题,太坑

@sg 太想给你点一个赞了

谢谢分享,今天正好遇到这个问题。我是从另一个垃圾站找到这里原文的,垃圾站居然在搜索引擎前面。。。

@Kamal 垃圾站就是为了搜索引擎!

能简写,干嘛还要单个的写呢

@皇家元林 有些时候单个写思维更清晰一些,简写容易弄混。
不同人有不同的逻辑思维,也有自己的偏好。

呵呵,我在设计一个登陆框的时候也遇到这样的问题,好久都不能解决,最后只好放弃了按扭背景,现在总算找到解决办法,谢谢老大

我去看看去,

我也见到和博主一样的问题,但奇怪我也是用简写的CSS一样只显示一个灰色的没有背景图片的按扭框在哪里.但firefox和chrome是正常的.我也排除了编码的问题,但是IE9以上的IE浏览器是没有问题的,还没有解决,头大…

<code>input#searchsubmit{
float:left;
background:url(images/all.png)no-repeat 0px -154px;
width:24px;
height:24px;
border: none;
margin-top:4px;
}</code>

解决了,原来是no-repeat前面少了一个空格……

IE真的很令人抓狂(包括IE8)。你说的这个问题也有可能是路径引起的。刚刚你也提到“可以排除图片链接的有效性”。为了保证背景图片能够正常显示,建议使用绝对路径,而不是相对于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)的原因

@氧气 果然是这个逼rgba搞的鬼啊,去掉就可以显示了,空格什么的已经不是问题了

@氧气 rgba(0, 0, 0, 0)我也是这个原因,去掉背景图片就能显示,ie真想抽它,完全不安套路出牌

本文地址:H5W3 » css背景图片ie不显示

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址