1. <div id="11111"></div>

    1. <div id="11111"></div>

      1. <div id="11111"></div>

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

        日期: 标签:CSS,Web,故障排除,经验,网页设计 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」创作共享协议,转载请标注以下信息:
        原文出处:露兜博客 http://www.szeverich.net.cn/css_background.html
        露兜
        kaapass@outlook.com  QQ 825533758

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

        34 条留言

        点此留言
        1. jfdba

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

        2. Ludou

          @jfdba 不客气!

        3. 淘好

          新年快乐!

        4. Ludou

          @淘好 嗯,春节快乐!

        5. Tsunami

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

        6. 洋葱

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

        7. Ludou

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

        8. 第三方·

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

        9. Ludou

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

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

        10. 第三方·

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

        11. Ludou

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

        12. sinianYY

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

        13. sinianYY

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

        14. Ludou

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

        15. sg

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

        16. tianhandigeng

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

        17. 合子

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

        18. 第一滴泪

          @sg 你太牛了,哥谢你了

        19. tt

          @第一滴泪 哈哈 太谢谢了

        20. uu

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

        21. 洋葱

          @sg 太想给你点一个赞了

        22. Kamal

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

        23. Ludou

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

        24. 皇家元林

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

        25. Ludou

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

        26. 倡萌

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

        27. 优设前端

          我去看看去,

        28. 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>

        29. yesureadmin

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

        30. 侯永禄

          IE真的很令人抓狂(包括IE8)。你说的这个问题也有可能是路径引起的。刚刚你也提到“可以排除图片链接的有效性”。为了保证背景图片能够正常显示,建议使用绝对路径,而不是相对于CSS的路径?;故巧勘妊撬档煤茫篢here are a thousand BUG in a thousand Internet Explorer

        31. 豆芽菜

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

        32. 氧气

          background: url(../images/in_bon_02.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);

          IE不显示原来是,
          rgba(0, 0, 0, 0)的原因

        33. rgba

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

        34. zhanwanyan

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

        发表留言

        可以挣钱的游戏 419| 84| 827| 421| 390| 419| 317| 899| 916| 433| 213| 651| 721| 422| 78| 970| 357| 933| 761| 10| 653| 803| 599| 802| 20| 178| 776| 999| 310| 81| 924| 452| 237| 942| 826| 605|