IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
一:要解决的问题时:在ie6-ie11下兼容下面透明上传文件button的效果。
实现方式通过滤镜实现。
二:效果图例如以下:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2h4MTAwNTE0MTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2h4MTAwNTE0MTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
三:代码:
样式:
.file2 {
position: absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*ie 8*/
filter: alpha(opacity=0);/*ie 5-7*/
opacity:.0;/*opera9.0+,firefox1.5+,safari,chrome*/
width: 30px;
height: 20px;
line-height: 20px;
cursor: pointer;
padding: 0;
overflow: hidden;
padding-top: 0px;
}
<pre class="html" name="code"><em style="width:30px; height:20px; line-height:20px;overflow:hidden; font-style:normal;">
<input type="file" class="file2" id="filep_${item.DM}" style="border:none;" onchange="upload(this,'${item.DM}');" />
<a href="javascript:void(0)" >上传</a>
</em>
<font style="color: gray;">删除</font>
IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题的更多相关文章
- IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
这个世界变化很快,IE8也快出来了,它将不在支持以前{filter:alpha(opacity=50);}的私有属性,转而支持更规范的私有属性-ms-filter: “progid:DXImageTr ...
- 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
先请看如下代码: filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Moz + FF */ op ...
- 解决Firefox/Opera 不支持onselectstart事件实现不允许用户select
在IE/Safari/Chrome中我们可以使用onselectstart事件来阻止用户选定元素内文本,本文为大家解决下火狐中如何实现不能选择,由此需求的朋友可以参考下,希望对大家有所帮助 ...
- [置顶] 解决Firefox/Opera 不支持 onselectstart事件
在开发中,很多区域是不允许用户select的,在IE/Safari/Chrome中我们可以使用onselectstart事件来阻止用户选定元素内文本, 但在火狐中,这段区域还是可以选择的, 如下: & ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)
ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明. 很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG ...
- 用CSS实现Firefox 和IE 都支持的Alpha透明效果
有的时候,为了实现一些特殊效果,需要将页面元素变透明,本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果.CSS: filter:alpha(opacity=50 ...
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览 ...
- css firefox火狐浏览器下的兼容性问题
1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-al ...
随机推荐
- 一则 ORA-00471 处理方法
公司新上架一台服务到机房,硬件是IBM X3850 X5,硬件配置算是好的,内存有128GB.SA安装好系统--(版本sule 32bit)后通知我可以安装数据库了.忙活半天,安装好oracle 92 ...
- Javascript 中的非空判断 undefined,null, NaN的区别
JS 数据类型 在介绍这三个之间的差别之前, 先来看一下JS 的数据类型. 在 Java ,C这样的语言中, 使用一个变量之前,需要先定义这个变量并指定它的数据类型,是整型,字符串型,.... 但是 ...
- [Java聊天室server]实战之二 监听类
前言 学习不论什么一个稍有难度的技术,要对其有充分理性的分析,之后果断做出决定---->也就是人们常说的"多谋善断":本系列尽管涉及的是socket相关的知识,但学习之前,更 ...
- gcc configure: error: Building GCC requires GMP 4.2+, MPFR 2.3.1+ and MPC 0.8.0
从svn checkout svn://gcc.gnu.org/svn/gcc/trunk拿了GCC的最新代码,打算编译了学东西习学习C++ 11的东西,结果在configure的时候出现例如以下问题 ...
- 亚马逊AWS在线系列讲座——基于AWS云平台的高可用应用设计
设计高可用的应用是架构师的一个重要目标,可是基于云计算平台设计高可用应用与基于传统平台的设计有很多不同.云计算在给架构师带来了很多新的设计挑战的时候,也给带来了很多新的设计理念和可用的服务.怎样在设计 ...
- css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
- Android ListView 单条刷新方法实践及原理解析
对于使用listView配合adapter进行刷新的方法大家都不陌生,先刷新adapter里的数据,然后调用notifydatasetchange通知listView刷新界面. 方法虽然简单,但这里面 ...
- ORA-00942:表或视图不存在(低级错误)
在好多时候.调试PL/SQL对象时会报.ORA-00942 看看错误原因吧: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFjc29uX2JhaQ== ...
- 14.9.4 COMPACT and REDUNDANT Row Formats
14.9.4 COMPACT and REDUNDANT Row Formats InnoDB 早期的版本 使用一种未命名的文件格式(现在称为Antelope(羚羊)) 对于数据库文件 在这种文件格式 ...
- Spark SQL Catalyst源代码分析之TreeNode Library
/** Spark SQL源代码分析系列文章*/ 前几篇文章介绍了Spark SQL的Catalyst的核心执行流程.SqlParser,和Analyzer,本来打算直接写Optimizer的,可是发 ...