IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题

一:要解决的问题时:在ie6-ie11下兼容下面透明上传文件button的效果。

实现方式通过滤镜实现。

二:效果图例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2h4MTAwNTE0MTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2h4MTAwNTE0MTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

三:代码:

样式:

.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>



时间: 2024-08-09 12:11:21

IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题的相关文章

解析IE, FireFox, Opera 浏览器支持Alpha透明的方法

先请看如下代码: filter:alpha(opacity=50);       /* IE */  -moz-opacity:0.5;              /* Moz + FF */  opacity: 0.5;           /* 支持CSS3的浏览器(FF 1.5也支持)*/ 简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持C

IE浏览器和主流浏览器对css样式背景透明,字体不透明的处理方法

刚学习了css兼容性问题,兼容性问题是我们前端开发者必须要跨越的一道鸿沟,对于不同浏览器,我们都要考虑其兼容性,代码的可操作性,因为同一段代码可能在谷歌和火狐等等主流浏览器上显示是正常的,但是在IE浏览器上却显示的很怪异,尤其以IE6为主要照顾对象. 其他不多说,这里如标题所写的一样,我主要是解决css里实现背景透明而文字不透明的方法,经测试,自己写的代码在IE和非IE浏览器上都能正常显示,有代码不足之处,让大家指正,大家的努力才能创造我们web前端的明天. 在非IE浏览器下要实现背景和字体一起

让ie浏览器支持html5新标签的解决方法(使用html5shiv)

没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是: IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下: document.createElement('新标签'); / /新增创建新标签   方式一:Codi

IE6支持PNG24图片背景透明

网上关于IE6支持PNG24图片背景透明的方法有数种,以下只列出其中两种个人认为比较实用的方法. 第一种:使用IE自身滤镜background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop"); 原理:其他浏览器调用PNG,IE6则先设背景没有(必

[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器

截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览器 使用IE内核的非主流浏览器 使用Chrome内核的非主流浏览器 使用混合内核的非主流浏览器 获取浏览器版本方法: function getBroswer(){ var sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s

BX2001: IE 支持使用 window.clipboardData 访问系统剪贴板,Chrome 和 Safari 中存在类似的 Clipboard 对象但尚未实现,Firefox 和 Opera 不支持这类对象

http://www.w3help.org/zh-cn/causes/BX2001 标准参考 无 问题描述 IE 支持使用 window.clipboardData 对象内的一系列方法访问系统剪贴板:Chrome 和 Safari 中存在类似的 Clipboard 对象,且有与 IE 中类似的方法,但其功能尚未实现:Firefox 和 Opera 不支持这类对象. 造成的影响 若作者在需要访问剪贴板时仅仅考虑 IE 浏览器而使用了其专有的 clipboardData 对象,则在其他浏览器中可能导

Firefox 51 浏览器将正式支持 FLAC 解码播放

Mozilla 的工程师们正在努力让火狐浏览器支持 FLAC.而根据目前的估算,定于明年一月底发布的火狐 51 浏览器稳定版将率先正式支持 FLAC.FLAC 是免费无损音频编解码器的缩写,而且它是一个开源的无损压缩音频编解码器.(腾云科技TY300.COM)FLAC 让音乐爱好者可以用更小的文件尺寸来聆听原始音频数据,即使目前 FLAC 文件尺寸超过普通 MP3 文件尺寸数倍. 目前 Mozilla 工程师已经开始在 Firefox 主代码库中嵌入 FLAC 的支持.火狐浏览器将会是五大浏览器

Javascript检测浏览器对CSS属性的支持 /* supports */

//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '); return function(prop) { if ( prop in div.style ) return true; var len = vendors.length; prop = prop.replace(/^[a-z]/, fun

css的浏览器支持

#box{     color:red;    ⁄* 所有浏览器都支持 *⁄      color:red !important;   ⁄* Firefox.IE7支持 *⁄    _color:red;   ⁄* IE6支持 *⁄    *color:red;   ⁄* IE6.IE7支持 *⁄    *+color:red;   ⁄* IE7支持 *⁄    color:red \9;   ⁄* IE6.IE7.IE8支持 *⁄    color:red \0;   ⁄* IE8支持 *⁄}