CSS 之 Opacity多浏览器透明度兼容处理

用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持。

不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari:

IE: filter:alpha(opacity)
Mozilla: -moz-opacity
Safari: -khtml-opacity
很不幸的是,你没看见Opera,老版本的Opera并没有什么私有属性可以代替opacity。(新版Opera已经支持opacity)

所以以前用CSS设定一个元素半透明的话,可能会这样写:

.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
}

用javascript来设定一个元素为半透明:

object.filter = "alpha(opacity=" + opacity + ")"; /* IE */
object.MozOpacity = (opacity / 100); /* 老版Mozilla */
object.KhtmlOpacity = (opacity / 100); /* 老版Safari */
object.opacity = (opacity / 100); /* 支持opacity的浏览器*/

时间: 2024-11-06 15:29:04

CSS 之 Opacity多浏览器透明度兼容处理的相关文章

Opacity多浏览器透明度兼容处理

用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: filter:alpha(opacity) Mozilla: -moz-opacity Safari: -khtml-opacity 很不幸的是,你没看见Opera,老版本的Opera并没有什么私有属性可以代替opacity.(新版Opera已经支持opacity) 所以以前用CSS设定一个元素半透明的话

CSS hack 解决各浏览器不兼容问题

1.IE8下兼容问题:转化成IE7兼容,头部加上代码: <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>  2.flaot浮动造成IE6双倍边距: margin-left:10px!important; /*IE7,IE8,FF下是10PX*/; margin-left:5px; /*IE6下属性写的是5PX,但在显示出来的是10px 或者给浮动元素加上display:inli

转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则.实现浏览器兼容主要有两种方式条件样式表和CSS Hacks(Selector Hacks.Attribute Hacks).对此根据一些资料汇总了一些CSS Hacks方法.   1.条件样式表 像这样的代码你应该见过: <link rel="stylesheet

css禁止用户选择文本(兼容所有浏览器)

css禁止用户选择文本(兼容所有浏览器) 如果让整个页面都禁止选择,可以使用下面的css body{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 如果希望指定元素禁止访问,请看下面的示例代码: <!doctype html> <html

纯CSS实现:垂直居中,未知宽高,已知宽高,IE5除外所有浏览器均兼容

纯CSS实现:盒子内元素垂直居中,宽高固定与否均可,IE5除外所有浏览器均兼容: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>纯CSS实现:盒子内元素垂直居中,宽高固定与否均可,IE5除外所有浏览器均兼容</title> 6 <style> 7 *{ margin:0; padding:0; } 8 di

[转文]浏览器的兼容

浏览器的内核 Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Google Chrome ( WebKit )<!--more-->腾讯TT.世界之窗.360浏览器.遨游浏 览器都是给IE加了个外壳,不过如果电脑上装的是ie8的话,这些浏览器还是调用ie7的内核.搜狗浏览器比较特殊,它有两种浏览模式:一是兼容模式,该 模式使用IE内核:二是高速模式,该模式使用W

浅谈浏览器的兼容问题

前端以产品为核心,以用户体验为基础.自然作为前段开发人员,做好用户体验,浏览器的兼容问题不可忽视,合理的布局自不必提.接下来列举几种常见的浏览器兼容问题及解决办法. 字体大小问题 FireFox浏览器的默认字体为13px:而IE浏览器默认为16px. 解决方法:指定字体大小,font-size:14px;. ul和ol列表的缩进问题 消除ul.ol列表的缩进样式.设置样式:list-style:none;margin:0;padding:0;(margin属性针对IE生效,padding属性针对

CSS如何设置div背景透明度且兼容性良好

CSS如何设置div背景透明度且兼容性良好: 建议:尽可能的手写代码,可以有效的提高学习效率和深度. 设置对象的透明度在很多网页特效中都有实用,设置对象的透明度并不难,唯一的难点可能就是如何兼容各大主流浏览器,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" cont

好程序员前端教程-关于浏览器的兼容问题

好程序员前端教程-关于浏览器的兼容问题常见浏览器兼容问题:1.li在IE中底部3像素的BUG.解决方案:在< li>上加float:left:即可解决 IE6中奇数宽高的BUG.解决方案:就是将外部相对定位的div宽度改成偶数.高度也是一样的. IE6文字溢出BUG.引发这种BUG有以下几个条件:1)是注释引起的,删除所有注释即可.2)hidden的input直接放在form下.3)display为none的div也有可能引发此bug.4)可以通过外面再包一次DIV解决.由注释造成文字溢出,属