初衷是想给这个提交按钮<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的问题了。

浏览器能正常显示的怪现象。最后我在网上找到了这段话:IE图片格式问题会导致IE无法显示图片。对于IE来说,直接改后缀名会导致图片不能显示。如果后缀名跟文件自身的格式不相符合,也是一样会无法显示。firefox这些浏览器不会有影响,他们可以自己识别。真相大白了,在css里换了一张图片,没问题了,ie和firefox都能显示了。没想到ie这么脆弱,说罢工就罢工。

链接图片的反括号和定位值一定要加个空格,如url(images/bg_media_lihover.gif) 5px 6px no-repeat #00a1de;

为了保证背景图片能够正常显示,建议使用绝对路径,而不是相对于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)的原因。

IE模式下背景图片不显示的更多相关文章

  1. IE下背景图片 不显示问题

    转自:http://www.jb51.net/css/119341.html 在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来,具体的写法如下,有类似情 ...

  2. IE6 IE8下背景图片不显示问题

    更改background:url()no-repeat; 去掉no-repeat即可解决问题!

  3. background属性冲突导致的部分浏览器背景图片不显示问题

    前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...

  4. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  5. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  6. extjs中新建窗体时,给窗体添加背景图片不显示问题之一

    1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了  layout: 'fit', Ext.create('Ext.Window', { title: ...

  7. 关于ie6 下背景图片不透明以及Img不透明

    ie6 下背景图片不透明的方法,加上下面的js即可解决 //解决IE6下图片不透明 function correctPNG() // correctly handle PNG transparency ...

  8. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  9. IE浏览器下一些图片无法显示的(在其他非ie浏览器能够显示)解决办法

    因为要完成本学期老师布置得网页作业,做完的时候进行网页的兼容性测试,chrome和360都没有问题. ie下却有两个图片无法显示. 一般这种情况代码是没有什么问题的,一般是图片本身的问题, 当我用Ps ...

随机推荐

  1. zabbix通过snmp监控linux主机

    1.安装net-snmp [root@db01 ~]# yum install -y net-snmp 2.修改配置文件 [root@db01 ~]# vim /etc/snmp/snmpd.conf ...

  2. [Create_Cdi]

    bbb 原理:游标就是把数据按照指定要求提取出相应的数据集,然后逐条进行数据处理.1.1游标的概念  游标(Cursor)它使用户可逐行访问由SQL Server返回的结果集. 使用游标(cursor ...

  3. 持久化配置管理 diamond 使用简介

    本次为大家介绍diamond的概况和快速使用. 一.概况 diamond是淘宝内部使用的一个管理持久配置的系统,它的特点是简单.可靠.易用,目前淘宝内部绝大多数系统的配置,由diamond来进行统一管 ...

  4. 基于WPF系统框架设计(2)-Fluent Ribbon之HelloWorld

    Fluent/Ribbon是微软在其最新桌面操作系统Windows 7中使用的图形用户界面. Windows平台的进化,伴随着系统图形界面的重新设计.从Windows XP到Windows Vista ...

  5. 跟踪运行时错误 vue

    如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置).利用这个钩子函数来配合错误跟踪服务是个不错的主意.比如 Sentry,它为 ...

  6. 【VBA】VBA编写的,将一列中相同的内容的行提取出来单独生成文件

    数据如上图所示,点击RUN后的运行结果如下: 得到该文件夹,文件夹内容如上图. 代码如下: Private Sub Command_OLIVER() Dim arr arr = Range(" ...

  7. ajax个人学习笔记

    1. function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest(); }els ...

  8. Application provided invalid, non monotonically increasing dts to muxer in stream

    很多同学在使用Ffmpeg过程中都遇到Application provided invalid, non monotonically increasing dts to muxer in stream ...

  9. zabbix根据graph name 做screen

    下面亲测可用 #!/usr/bin/env python #coding:utf8 import urllib2 import sys import json import argparse #定义通 ...

  10. Git--代码托管/协同开发

    Git--代码托管 我爱写代码,公司写,家里写,如果每天来回带一个U盘拷贝着实麻烦,Git有没有类似于云盘似得东西可以进行数据同步呢?答案肯定是有. GitHub,一个基于Git实现的代码托管的平台, ...