zoukankan      html  css  js  c++  java
  • IE模式下背景图片不显示

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

    1 .subtn input {
    2     background-attachment: scroll;
    3     background-image: url(images/btn.gif);
    4     background-repeat: no-repeat;
    5     background-position: 0px 0px;
    6     height: 20px;
    7     width: 60px;
    8     border-style: none;
    9 }

         但是不知道是怎么回事,在Internet Explorer 6、7、8中皆无法显示该背景图片按钮,依然是默认的按钮形式,而在Firefox和Chrome中皆可以正常显示,可以排除图片链接的有效性,尝试修改了很多次都没有成功。后来使用background简写属性,在一个声明中设置所有的背景属性,在Internet Explorer居然可以正常显示了:

    1 .subtn input {
    2     background: url(images/btn.gif) no-repeat scroll 0px 0px;
    3     height: 20px;
    4     width: 60px;
    5     border-style: none;
    6 }

         刚开始我在想是不是我的网页代码存在特殊性,其他代码可能影响了该样式,但是后来我单独新建了一个.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)的原因。


  • 相关阅读:
    Azure HPC Pack Cluster添加辅助节点
    Azure HPC Pack 辅助节点模板配置
    Azure HPC Pack配置管理系列(PART6)
    Windows HPC Pack 2012 R2配置
    Azure HPC Pack 节点提升成域控制器
    Azure HPC Pack VM 节点创建和配置
    Azure HPC Pack 部署必要条件准备
    Azure HPC Pack 基础拓扑概述
    Azure VM 性能计数器配置
    Maven私仓配置
  • 原文地址:https://www.cnblogs.com/mazey/p/6557761.html
Copyright © 2011-2022 走看看