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

Ludou

     初衷是想给这个提交按钮<input type="submit" value=" />加上背景图片,用了以下css样式:

1
2
3
4
5
6
7
8
9
.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居然可以正常显示了:

1
2
3
4
5
6
.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的问题了。

本文版权归露兜博客所有,转载引用请完整注明以下信息:
本文作者:Ludou
本文标题:css的背景图片在ie下不显示在Firefox下可以显示?
本文地址:http://www.ludou.org/css_background.html

露兜博客博主,男生,业余Web程序员,儒家思想受益者。文采不佳,不喜欢聚光灯,不喜欢吹牛,不喜欢无序的做事方式。闲时喜欢写些代码自娱自乐,并在博客中分享一些个人技术经验。

标签: , , , ,

21 条评论

我来说两句
  1. jfdba

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

  2. Tsunami

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

  3. Ludou

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

  4. 第三方·

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

    • Ludou

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

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

      • 第三方·

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

  5. sinianYY

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

  6. sg

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

    • tianhandigeng

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

      • 合子

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

  7. Kamal

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

  8. 皇家元林

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

    • Ludou

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

  9. 倡萌

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

发表评论

因博主长期在外地出差,您的留言可能暂时不会得到回复。

订阅评论