解决opacity属性在低版本IE浏览器下失效的方法
以前,一直都以为ie9以下的版本不支持opacity属性。所以就同时使用 opacity和ie独特的filter蒙版。但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的opacity,这种情况下,同时使用opacity和filter就显的有点麻烦了。
其实,只使用opacity+jquery就完全解决这个问题。
用法如下:
<script type="text/javascript">
$(function () { $("#p1").css("opacity", 0.6); });
</script>
由于博客里面不能写js代码,有兴趣的朋友们可以把下面示例代码直接拷贝到txt文件中,
然后把文件后缀名改为.html就好,然后直接运行这个文件就可以在浏览器中看效果了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<title>CSS opacity 属性示例</title>
<style type="text/css" media="all">
#p2{opacity:0.4;}
p{width:200px;height:200px;background-color:green;float:left;}
</style>
<script type="text/javascript">
$(function () { $("#p1").css("opacity", 0.6); });
</script>
</head>
<body>
<p id="p1">opacity:0.6;这个透明度通过jquery添加,不存在低版本IE浏览器不兼容的现象</p>
<p id="p2">opacity:0.4;这个透明度直接使用样式设置,低版本的IE浏览器会没有透明效果</p>
</body>
</html>
解决opacity属性在低版本IE浏览器下失效的方法的更多相关文章
- 如何让低版本IE浏览器支持HTML5标签并为其设置样式
现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...
- 低版本IE浏览器 input元素出现叉叉的情况
都说是IE10之上的浏览器才有这个问题,恰巧我IE10之上都没有问题,反而是低版本的浏览器出现了这个问题.作为一个凭证,我先放一张图片在这里面. 之前无意中解决过这个问题,如今复现确实是没有解决,网上 ...
- split方法在低版本IE浏览器上无法解析的问题
前一篇不知道怎么被博客园给删了,重新补发一个. 最近在项目中发现一个很诡异的问题,通过js获取cookie时,发现赋给用户name的时候IE9和低于9以下的浏览器对比时获取到的名字不一样,通过调试发现 ...
- HTML5中的语义标签兼容IE8以及更低版本的浏览器
看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...
- 模拟实现兼容低版本IE浏览器的原生bind()函数功能
模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){ Function.prototype.bind=function( ...
- CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型
CSS中盒子模型的组成由内容区(content).内边距(padding).边框(border).外边距(margin)组成.内边距可细分为 padding-top.padding-right.pad ...
- 兼容低版本IE浏览器的一些心得体会(持续更新)
前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...
- 【前端】低版本IE浏览器访问网站一片空白
最近在客户那里,发现一个奇葩的问题,系统上IE浏览器访问网站一片空白,显示无法访问. 但是相同的网站系统,在我们的电脑上又可以访问且IE浏览器版本相同,没法只有,装虚拟模拟客户环境复现一下了. 发现在 ...
- android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下,另行实现圆形scale动画
ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...
随机推荐
- New Concept English Two 22 58
$课文56 比声音还快! 579. Once a year, a race is held for old cars. 旧式汽车的比赛每年举行一次. 580. A lot of cars enter ...
- 使用file_get_contents提交http post
以前使用curl获取需要登陆内容的文章,但其实,自5.0开始,使用file_get_contents就可以完成.(前提是开启了allow_url_fopen),下面以一个简单的例子说明一下:1.先看一 ...
- Ubuntu下的计算器
今天计算乘法时居然给算错了,好囧. 于是开始使用ubuntu自带的计算器:gcalctool 使用方法: 在终端直接输入命令gcalctool即可.
- UVA11732 "strcmp()" Anyone?【左儿子右兄弟Trie】
LINK1 LINK2 题目大意 给你一些字符串,并定义了一个函数(具体见题面) 问你把任意两个字符串放到函数里面得到的值的和是多少 思路 该怎么统计答案呢? 每次考虑当前插入的串和所有已经插入过的串 ...
- iMac 10年
10年前,也就是1998年8月15号,Apple 推出了蓝色半透明的 iMac G3(指上市,发布时间为当年5月6号),当年销售200万台,从此开启了它的一个时代,人们一旦说起设计,那么 Apple ...
- Android - 传统蓝牙通信聊天
Android -传统蓝牙通信聊天 技术:java+Android4.4+jdk1.8 运行环境:Android4.4.Android7.0 概述 Android 传统蓝牙的使用,包括开关蓝牙.搜索设 ...
- 全面剖析Smarty缓存机制一[三种缓存方式]
今天主要全面总结下Smarty模板引擎中强大的缓存机制,缓存机制有效减少了系统对服务器的压力,而这也是很多开发者喜欢Smarty的原因之一,由于篇幅较大,便于博友阅读,这篇文章将剖析Smarty缓存的 ...
- bzoj1925(SCOI2010)地精部落
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1925 要怎样才能想出正解呢? 当然有一维表示从1到 i . 发现最后是递增的方案数=最后是递 ...
- Spring JUnit org.hibernate.HibernateException: Unable to get the default Bean Validation factory
org.hibernate.HibernateException: Unable to get the default Bean Validation factory <property nam ...
- 我的第一个php扩展
一.进入php源码包,找到ext文件夹 cd /owndata/software/php-5.4.13/ext 文件夹下放的都是php的相关扩展模块 二.生成自己的扩展文件夹和相关文件 php支持开发 ...