今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式代码文件中设置了背景图background-image竟然失效不起作用不显示了!笔者查看了这个代码在IE、火狐等各浏览器下的 浏览效果,尽管该代码在DW(DreamWeaver)中显示正常,但是在浏览器中它的背景图片确实没有出现没有显示出来,想了很多解决办法和方案,动用了很多手段,连CSSHACK都用上了,就是不出来了,后来好一顿折腾才搞定,网页前端页面工程师也不好做啊!

原本CSS代码如下:

 background-image: url(images/kankanbei.jpg);
 background-repeat: no-repeat;

后来经过不断调试和探索,最终发现 只需加以下2行代码便可以解决CSS中设置了按钮背景图,但是浏览器中背景图失效不显示的网页前端代码兼容性问题:

 background-image: url(images/kankanbei.jpg);
 background-repeat: no-repeat;
 background-color: transparent;//关键就是将背景色设置为透明,好让背景图显示出来。这个代码在DW的IDE环境下是没有的,需要你手动输入这种背景颜色透明的CSS代码
 border:none;

最后看看呗[kankanbei.com]总结为:外部CSS代码中有某一处设置的属性导致此处按钮的原背景无法去掉,进而导致背景图片失效没显示。另外一种解决就是使用A标签来替代这些input和button标签。

input与button按钮背景图失效不显示的解决办法的更多相关文章

  1. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  2. button,input type=button按钮在IE和w3c,firefox浏览器区别

    在项目中遇到一个问题,是关于点击button按钮会自动刷新的问题.查阅了资料,做以下的整理: button,input type=button按钮在IE和w3c,firefox浏览器区别如下:当在IE ...

  3. iphone H5 input type="search" 不显示搜索 解决办法

    H5 input type="search" 不显示搜索 解决办法 H5 input type="search" 不显示搜索 解决方法 在IOS(ipad iP ...

  4. input标签和fmt:formatDate 在jsp中同时使用引号解决办法

    input标签和fmt:formatDate 在jsp中同时使用引号解决办法 使用input标签设置默认值value并格式化fmt时间格式处理 格式化前: <input type="d ...

  5. 苹果手机上input的button按钮颜色显示问题

    在苹果手机上的input按钮自带效果,需要加上outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机上的input按钮自带圆角需要按需要去掉 input ...

  6. 苹果iphone手机上input的button按钮颜色显示有问题,安卓却没问题

    苹果手机中会如类似上图,安卓却可以按自己写的来显示 解决办法: -webkit-appearance: none; 以上即可,当然样式中可以加上通用的: 通用:input[type=button], ...

  7. Android 学习笔记一 自定义按钮背景图

    入门学到的一些组件都是比较规矩的,但在实际应用中,我们需要更多特色的组件,例如一个简单的Button,所以我们必须要自定义它的属性. 遇到的问题:用两张图片来代替按钮,分别表示点击前后 解决方法:用I ...

  8. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  9. IOS的Safari浏览器中,点击事件失效的原理及解决办法

    这里做了事件委托,简单区分一下[目标元素]和[代理元素],为后续论述理解做铺垫. [目标元素]:实际希望点击的元素,可以是任意标签. [代理元素]:代替[目标元素]触发点击事件的元素,有可能是目标元素 ...

随机推荐

  1. 集合框架Map之entrySet方法的使用

    Map的entrySet函数的使用,取得是键和值的映射关系,Entry就是Map接口中的内部接口,类似与我们熟悉的内部类一样,内部类定义在外部类内部,可以直接访问到外部类中的成员 package cn ...

  2. Android实例-监测网络状态及一些事件(XE8+小米2)

    结果: 1.网络连接:是指现在可不可以上网(你非要问我什么是网,我会K你呀的). 2.WIFI网络:是指现在可以上网,用的是不是WIFI网络(如果你打开了WIFI那它会显示正在使用WIFI). 3.移 ...

  3. JavaScript一道面试题求y的值是? z 的值是? s的值是?

    原文:http://www.zhufengpeixun.cn/JavaScriptmianshiti/2014-04-01/287.html < script type = "text ...

  4. angular-tour 用户新手引导

    下载安装 bower install angular-tour 建立依赖,引入文件 <script src="bower_components/jquery/jquery.js&quo ...

  5. Delphi- ini文件的读写操作

    一.读INI文件示例 procedure TForm1.FormCreate(Sender: TObject); Var MyIni :Tinifile; glAppPath :string; beg ...

  6. MSSQLSERVER- CharIndex的妙用,找出有妙用

    CharIndex 1:CharIndex语法: CharIndex(expression1,expression2[,start_location]) 2:参数 expression1 一个表达式, ...

  7. EventBus的使用,初学EventBus传值

    一.概述 EventBus是一款针对Android优化的发布/订阅事件总线.主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间 ...

  8. [转]Java 动态代理机制分析及扩展

    引言 Java 动态代理机制的出现,使得 Java 开发人员不用手工编写代理类,只要简单地指定一组接口及委托类对象,便能动态地获得代理类.代理类会负责将所有的方法调用分派到委托对象上反射执行,在分派执 ...

  9. webservice 地址

    快递查询WEB服务 http://webservice.36wu.com/ExpressService.asmx 支持上百家快递/物流查询,准确高效,所有数据均来自快递服务商.此数据返回类型进行了封装 ...

  10. Hdu 5001 Walk 概率dp

    Walk Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5001 Desc ...