css的背景图片在ie下不显示在Firefox下可以显示?

日期: 标签:CSSWeb故障排除经验网页设计 34 条留言
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

     初衷是想给这个提交按钮<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
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

34 条留言

点此留言
  1. jfdba

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

  2. 淘好

    新年快乐!

  3. Tsunami

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

    • 洋葱

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

  4. Ludou

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

  5. 第三方·

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

    • Ludou

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

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

      • 第三方·

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

  6. sinianYY

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

    • sinianYY

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

    • Ludou

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

  7. sg

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

    • tianhandigeng

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

      • 合子

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

    • 第一滴泪

      @sg 你太牛了,哥谢你了

    • uu

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

    • 洋葱

      @sg 太想给你点一个赞了

  8. Kamal

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

    • Ludou

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

  9. 皇家元林

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

    • Ludou

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

  10. 倡萌

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

  11. 优设前端

    我去看看去,

  12. yesureadmin

    我也见到和博主一样的问题,但奇怪我也是用简写的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>

  13. yesureadmin

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

  14. 侯永禄

    IE真的很令人抓狂(包括IE8)。你说的这个问题也有可能是路径引起的。刚刚你也提到“可以排除图片链接的有效性”。为了保证背景图片能够正常显示,建议使用绝对路径,而不是相对于CSS的路径。还是莎士比亚说得好:There are a thousand BUG in a thousand Internet Explorer

  15. 豆芽菜

    果然是这个问题,谢谢楼主,终于解决这个问题了。困扰了我很久

  16. 氧气

    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搞的鬼啊,去掉就可以显示了,空格什么的已经不是问题了

    • zhanwanyan

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

发表留言