今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端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. SQL Server 2016原生支持JSON

    转载原地址: http://www.cnblogs.com/lyhabc/p/4747694.html SQL Server 2005 开始支持 XML 数据类型,提供原生的 XML数据类型.XML ...

  2. ECSHOP 数据库结构说明 (适用版本v2.7.3)

    ECSHOP 数据库结构说明 (适用版本v2.7.3) 1.account_log 用户账目日志表 字段 类型 Null/默认 注释 log_id mediumint(8) 否 / 自增 ID 号 u ...

  3. 详解struts.multipart.saveDir的临时文件路径

    Struts2中的struts.multipart.saveDir主要是用来设置上传文件的临时目录,在不同的配置方式下,它的临时文件目录大有不同,好多人在设置后往往找不到这个临时目录在哪里,下面我就来 ...

  4. eclipse创建maven模块工程

    创建maven模块项目,可以使用eclipse工具来完成. 1.创建父工程,注意,要选择maven-archetype-site-simple new --> maven project 填写项 ...

  5. SAP PP 生产订单变更记录保存

    *&---------------------------------------------------------------------* *& 包括 ZXCO1U01 *&am ...

  6. Parameterized Path 的例子

    Improve the planner's ability to use nested loops with inner index scans (Tom Lane) The new "pa ...

  7. 60款开源云应用【Part 2】(60 Open Source Apps You Can Use in the Cloud)

    60款开源云应用[Part 2](60 Open Source Apps You Can Use in the Cloud) 本篇翻译自http://www.datamation.com/open-s ...

  8. MmSystem播放Wav格式声音

    //MmSystem播放Wav格式声音 //MmSystem 支持 *.wav声音格式 snd ->SoundRecorderuses MmSystem; //引用MmSystem//播放系统声 ...

  9. 启动hbase时,hregionserver没有启动的原因

    今天配置hbase的时候发现有几台机器的regionserver启不来.报错例如以下: at sun.reflect.NativeConstructorAccessorImpl.newInstance ...

  10. zend studio 安装xdebug

    XDebug安装 到http://xdebug.org/download.php选择自己需要的xdebug版本.然后按照下面的配置建立目录.并在php.ini加入这些内容.重启server 注意xde ...