首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

完美兼容ie6,ie7,ie8以及firefox的css透明滤镜

冷蝶 2015-4-23 [DIVCSS] 来自PC 复制链接
102898
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
例是一个兼容IE6/IE7/IE8和火狐浏览器的css实现半透明层效果,之前本人也遇到过这样的问题,就是把一个层设置半透明后,内的文字也跟着半透明了,一直没找到合适的解决办法,今天看到designcss.org有一篇文章解决了这个问题,但有一点,发现在filter前边多加一个星号,多加个星号是为了让IE6和IE7执行,火狐和IE8就不执行了,火狐本身来讲就不支持IE特有的滤镜功能,所以这里没必要再加星号。还有就是不支持IE8浏览器,经过研究,查阅大量资料,终于找到解决办法了,下面分享出来。

css用到的\9是css hack的写法,是为了兼容不同的浏览器而使用的

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>兼容ie6,ie7以及firefox的css透明滤镜,文字不继承其透明属性</title>
  6. <style type="text/css">
  7. #container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5); background:#f00\9; filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;}
  8. #container *{ position:relative;}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="container">
  13.      <span>我是内容我是内容我是内容我是内容我</span>
  14.     </div>
  15. </body>
  16. </html>
复制代码



上一篇:让IE6、IE7、IE8支持CSS3的圆角、阴影样式
下一篇:CSS实现两端对齐的3种方法
jingjinxin 发表于 2015-4-23 22:08:39 来自PC
感谢专业分享
糖糖悠 发表于 2015-6-9 14:01:26 来自PC
强烈支持,站帮网有你更精彩
失物认领 发表于 2015-6-9 15:33:57 来自PC
感谢楼主分享                                                  失物认领网
www.shiwurenling.com失物认领网
三打哈 发表于 2015-6-9 16:20:40 来自PC
我只是路过站帮网打酱油的。
摩羯座 发表于 2015-6-9 18:45:51 来自PC
谢谢分享
zgny 发表于 2015-6-9 19:23:45 来自PC
感谢专业分享
yzhkf218 发表于 2015-7-16 22:43:08 来自PC
感谢楼主分享   
www.fuqilove.com
liu1369126230 发表于 2015-7-17 10:10:56 来自PC
我只是路过站帮网打酱油的,顺便支持下
332371816 发表于 2015-7-27 22:54:55 来自PC
强烈支持,站帮网有你更精彩
向志祥 明星会员实名认证 发表于 2015-9-6 00:54:26 来自PC
我只是路过站帮网打酱油的,顺便支持下
http://www.37hao.net
文山社区,努力做到文山最有影响力的网站
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表