今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端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. CP2102模块介绍(USB转uart)

    1.主芯片为CP2102,安装驱动后生成虚拟串口2.USB取电,引出接口包括3.3V(<40mA),5V,GND,TX,RX,信号脚电平为3.3V,正逻辑3.板载状态指示灯.收发指示灯,正确安装 ...

  2. [OC Foundation框架 - 11] NSMutableDictionary

      void dicUse() { NSMutableDictionary *dic = [NSMutableDictionary dictionary]; Student *stu1 = [Stud ...

  3. JS 实现地区,省份,城市,县区4级联动

    刚学JS,实战一下,做一个省份信息4级联动. 但是网上查了都是3级的,没有4级,现在做一个的是带地区的4级联动,最简单的办法是修改别人的代码,最开始找到的事类似于下边这个的: 省市县关联菜单 < ...

  4. .Net 项目常见疑难杂症

    1.A项目引用 B项目 B项目引用C.dll 同时 A也必须引用 C.dll 则 A中引用的C的版本 必须和 B中引用C的版本相同 否则就会出现下面这类问题:解决办法 :同步A B项目中引用C的版本一 ...

  5. Dom深入浅出

    Dom1级提供了一个Node接口,该接口将由Dom中所有节点类型(包括元素节点.文本节点.属性节点等12种)实现,而js是作为Node类型来实现的,js中的所有节点类型的继承自Node类型, 所以它们 ...

  6. iOS开发 autoResizingMask使用

    autoResizingMask 是UIView的一个属性,在一些简单的布局中,使用autoResizingMask,可以实现子控件相对于父控件的自动布局. autoResizingMask 是UIV ...

  7. Microsoft .NET Pet Shop 4

    Microsoft .NET Pet Shop 4:将 ASP.NET 1.1 应用程序迁移到 2.0 299(共 313)对本文的评价是有帮助 - 评价此主题 发布日期 : 2006-5-9 | 更 ...

  8. jsp应用bootstrap表格应用实例

    一.初始化表格 <div style="margin-top: 80px;margin-left:45px;margin-right:30px;overflow-x: scroll&q ...

  9. RxJava的使用

    前言 RxJava及RxAndroid比较详细的介绍可以参考该文档<给 Android 开发者的 RxJava 详解> 基本介绍 ReactiveX 及 RxJava使用大部分来自和参考& ...

  10. SQLite使用教程10 运算符

    SQLite 运算符 SQLite 运算符是什么? 运算符是一个保留字或字符,主要用于 SQLite 语句的 WHERE 子句中执行操作,如比较和算术运算. 运算符用于指定 SQLite 语句中的条件 ...