几乎都是针对IE 6的,毕竟IE 6的BUG最多,更老的浏览器就忽略了。
IE的条件注释
<!-- [if IE]
<style>...</style>
--!>
神奇的是还可以指定IE的版本
<!-- [if IE 6]
<style>...</style>
--!>
说明:这种方式极其有效,而且简单,很多大型网站仍然在使用这种方式。
基于选择器的过滤器
IE6不支持后代选择器和属性选择器,所以利用好浏览器不支持的选择器也是一种方式。但是会造成不同浏览器上用户体验的差异。
星号属性
div{*color:red;}
IE6和IE7可以识别星号属性,但是IE8和标准浏览器都不行。
下划线属性
div{_color:red;}
IE6可以识别下划线属性,但是IE7、IE8和标准浏览器都不行。
!important
!important用于提高规则的优先级,但是IE6在处理单一规则中多个相同属性时存在BUG
#nav{position:fixed !important;position:static;}
IE6会忽略第一个设置而应用第二个。此招数的功能和下划线属性功能相同。
另外,想看更高级更完整的过滤器技巧,请猛击下面的链接:
http://centricle.com/ref/css/filters/
------------------------------------以下为另一篇文章---------------------------------------
CSS Tip: Targeting IE 5.x, 6 and 7 Separately
In rare situations it may be necessary to provide different rules, not only to the Internet Explorer family in general, but also to each individual version. We can combine 3 CSS Hacks to achieve this.
Differentiating between IE 6 and below and IE 7
Firstly we can target IE 6 and IE 7 separately using the underscore hack and far less well documented star property hack (commonly mistaken for the star HTML hack).
.box {
background: #00f; /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background: #f60; /* IE 6 and below */
padding: 7px;
color: #fff;
}
View Example
In this example all non IE browsers (which also includes Mac IE) see the first background rule. This sets the box colour to blue. Both IE 6 & 7 then see the next rule (prefixed with a star) which overrides the first rule and sets the background colour to red. Finally IE 6 and below also see the final rule (prefixed with an underscore) and set the background colour to orange.
Differentiating between IE 6 and IE 5.x
We can expand on this ruleset by making use of the backslash part of the Simplified Box Model Hack described here. Escaping any letter within the property name which isn't in the range a-f, A-F, 0-9 will hide that rule from IE 5.x. We can therefore define a rule for IE 5.x, which will also be seen by IE 6, and then override that with a backslash commented rule for IE 6.
.box {
background: #00f; /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background: #0f0; /* IE 6 and below */
_bac\kground: #f60; /* IE 6 only */
padding: 7px;
color: #fff;
}
View Example
The background colour in IE 5.x will now be green rather than the orange specified for IE 6.
Conditional Comments
Of course IE already provides the ability to target different versions via conditional comments. You should generally favour these over the method described above. There are, however, situations where you may want to consider it, such as when the scope of changes are so small that you don't want to incur the overhead of an additional HTTP request if included in an external file or if don't want to include the IE specific rules inline.
Disclaimer
You should always be careful when implementing CSS hacks and first make sure that the problem you're trying to solve is in fact something that needs hacking around and not something you've implemented incorrectly. Tantek Çelik article on the Web Standards Project Website provides interesting reading on the history of hacks and when and when not to use them.
* Back to index
* Bookmark It
Comments
*
Nice hack, you can take this a step further for IE 5.0, and IE 5.5 by using comments in your rules. So your example would be:
.box {
background: #00f; /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background/**/: #0f0; /* IE 5.0 */
_background:/**/ #f62; /* IE 5.5 only */
_background/**/:/**/ #f61; /* IE 6 only */
padding: 7px;
color: #fff;
}
From: http://www.ejeliot.com/blog/63
<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
</p>
分享到:
相关推荐
4.8.1静态CSS的过滤器属性4.8.1静态CSS的过滤器属性
filter.css, CSS过滤器组合集合 filter.css一对CSS过滤器组合,让你开始。 请参见现场演示 。用法将 filter.css 文件添加到项目中。链接到 filter.css 文件。<!-- In your <head>
这是一个向 jade 添加 PostCSS 过滤器的简单模块。 ##安装 $ npm install jade-postcss##用法 var jade = require ( 'jade' ) ;var postcss = require ( 'jade-postcss' ) ;jade . filters . postcss = postcss...
CSS的使用,及CSS过滤器制作,附层叠样式的作品。
Postcss过滤器 这是一个分支。 所有功劳 。 原始的仅实现 postcss模块。 该fork为添加了一个过滤器。 该项目称为Postcss,因为它可以实现每个postcss模块,并让您选择要使用的模块。 由于我是postcss的新手,所以...
之后本书用两章讨论招数、过滤器、bug和bug修复,最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员,将书中讨论的许多技术组合起来,给出了两个实例研究。本书还集中介绍了现实的浏览器问题,是弥补CSS知识...
css-filter-demo:一些可用CSS过滤器的演示
这是一款使用CSS3过滤器(CSS3 Filters)和Vibrant.js制作的效果非常炫酷的图片颜色提取幻灯片特效插件。这个图片颜色提取特效可以将当前页面中显示的图片的主要色调提取出来,显示在下方方格中。
CSS3过滤器实现的霓虹灯文本效果源码.zip
CSS3网页元素过滤器功能.zip
CSS3 过滤器实现的背景视频颜色变换效果源码.zip
css-filter.js CSS 过滤器的 js 包装器。
map-css-filters 使用CSS过滤器值映射对象
jQuery和CSS3的图像过滤器复制移动的影响,鼠标悬停图片高亮显示,鼠标离开图片模糊显示,插件适合做图片相册展示效果。 但目前只能在Chrome和Safari 6或更高的浏览器版本支持。特效查看地址:...
这是一款基于SVG过滤器和CSS3制作的可爱小动物动画特效。该特效中使用HTML标签和SVG结合制作动物的外形,并通过CSS3 animation动画来制作动物的各种动画特效。
FilterAwesome 是一个 CSS 过滤器库。 有了它,您只需要添加一个类,您就可以为图像添加过滤器。 尝试 贡献 这是一个新项目,但我稍后会推出更漂亮的过滤器。 如果您想贡献一项或多项,只需: Fork 这个 repo 创建...
没有得到广泛的支持CSS3过滤器,和Firefox / Mozilla的据我所知只支持SVG的,它的掩码属性。 周围的IMG标签,包装了一个DIV,所以你可能要适用于相同的风格属性,选择“tiltshift包装” 拉的要求呢?是的,快乐的...
这是一款非常实用的jQuery内容过滤器插件。该内容过滤器插件可以通过多种方式来触发过滤条件:文本框、下拉框、单选按钮、多选按钮等。该插件集成了MixItUp,并使用css3来制作平滑滑动效果。
将CSS过滤器应用于图像 入门 汇入 import { Img } from './Img' 例子 // 50% Grayscale image // Or without units // 10px Blur and 20% sepia // Invert 50% and custom styles < Img