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的问题了。
浏览器能正常显示的怪现象。最后我在网上找到了这段话: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模式下背景图片不显示的更多相关文章
- IE下背景图片 不显示问题
转自:http://www.jb51.net/css/119341.html 在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来,具体的写法如下,有类似情 ...
- IE6 IE8下背景图片不显示问题
更改background:url()no-repeat; 去掉no-repeat即可解决问题!
- background属性冲突导致的部分浏览器背景图片不显示问题
前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...
- vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容: 添加红框中的内容即 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- extjs中新建窗体时,给窗体添加背景图片不显示问题之一
1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了 layout: 'fit', Ext.create('Ext.Window', { title: ...
- 关于ie6 下背景图片不透明以及Img不透明
ie6 下背景图片不透明的方法,加上下面的js即可解决 //解决IE6下图片不透明 function correctPNG() // correctly handle PNG transparency ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- IE浏览器下一些图片无法显示的(在其他非ie浏览器能够显示)解决办法
因为要完成本学期老师布置得网页作业,做完的时候进行网页的兼容性测试,chrome和360都没有问题. ie下却有两个图片无法显示. 一般这种情况代码是没有什么问题的,一般是图片本身的问题, 当我用Ps ...
随机推荐
- windows 用wireshark抓本机的包
原文: http://bijian1013.iteye.com/blog/2299856 1.也可以用另外一个工具: RawCap 当然也不是说windows下就别想抓到本地回路的包了,肯定有别的方法 ...
- 2017.4.18 静态代码分析工具sonarqube+sonar-runner的安装配置及使用
配置成功后的代码分析页面: 可以看到对复杂度.语法使用.重复度等等都做了分析,具体到了每一个方法和每一句代码. 四种使用方式: sonarqube + sonar-runner sonarqube + ...
- 微信小程序 - 替换tabbar(采用固定定位形式)
简单示例(提供思路): wxml(作为模板形式插入到需要tabbar的地方去) <view class='tab-bar'> <view class="usermotto& ...
- C++11之右值引用(三):使用C++11编写string类以及“异常安全”的=运算符
前面两节,说明了右值引用和它的作用.下面通过一个string类的编写,来说明右值引用的使用. 相对于C++98,主要是多了移动构造函数和移动赋值运算符. 先给出一个简要的声明: class Strin ...
- 斯坦福《机器学习》Lesson4感想--1、Logistic回归中的牛顿方法
在上一篇中提到的Logistic回归是利用最大似然概率的思想和梯度上升算法确定θ,从而确定f(θ).本篇将介绍还有一种求解最大似然概率ℓ(θ)的方法,即牛顿迭代法. 在牛顿迭代法中.如果一个函数是,求 ...
- 仿新浪首页、主题、详情页,纯html静态页面
仿新浪首页.主题.详情页.纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535
- 简单的 nginx 多站点配置
测试环境:基于CentOS6.8 编译安装LNMP(http://www.cnblogs.com/afee666/p/6836161.html) 一 需求 在一个 VPS 主机上配置 web 服务器, ...
- oracle经常使用函数(1)
1.返回与指定的字符相应的十进制数 select ascii('A') A,ascii('z') a,ascii('12') 一打,ascii(' ') kg from dual; 2.返回与指定十进 ...
- 转MQTT--Python进行发布、订阅测试
前言 使用python编写程序进行测试MQTT的发布和订阅功能.首先要安装:pip install paho-mqtt 测试发布(pub) 我的MQTT部署在阿里云的服务器上面,所以我在本机上编写 ...
- 将Latex tex文档转换成 word文档(下)
在上篇中我们介绍了一款将 tex 文件转换成 word 文件的工具 借用万能的搜索引擎,在 Google 上找到了更好的工具 它就是Pandoc 介绍 Pandoc 是由 John McaFarlan ...