浏览器css hack

(1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;

(2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important ;

(3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_;

(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

示例:

(1)区别FF(IE8)与IE6 IE7

backgorund:orange; FF和IE8背景色将为橘黄色

*backgorund:red;   IE6和IE7背景色将为红色

(2)区别FF(IE8)与IE6与IE7

background:orange;   FF和IE8背景色将为橘黄色

*background:red !important;  IE7背景色将为红色

*background:blue;     IE6背景色将为蓝色

(3)区别FF(IE8)与IE6与IE7

background:orange;        FF和IE8背景色将为橘黄色

*background:red;          IE7背景色将为红色

_background:blue;         IE6背景色将为蓝色

(4)区别FF与IE6 IE7 IE8 IE9

color:gray;       FF等非IE浏览器字体色将为灰色

color:red\9;     IE8 IE9字体色将为红色

*color:green;     IE7字体色将为绿色

_color:blue;     IE6字体色将为蓝色

提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式,其次写IE8所需样式,接着是IE7的,再接着才是IE6的!

总结:实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.

1、Css if hack条件语法
< !--[if IE]> Only IE <![endif]-->
仅所有的WIN系统自带IE可识别
< !--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
< !--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
< !--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
< !--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别

<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别
< !--[if gte IE 7]> Only IE 7/+ <![endif]-->
IE7以及IE7以下的IE6、IE5.x都可识别

<!--[if IE 8]> Only IE 8/- <![endif]-->
仅IE8可识别

<!--[if IE 9]> Only IE 9/- <![endif]-->
仅IE9可识别

:在 if  后加 lt gte有不同效果 (参加其它参数同理)

  • <!–[if IE 8]> = IE8 仅IE8可识别
  • <!–[if lt IE 8]> = IE7或更低版本

<!–[if gte IE 8]> = 高于或者等于IE8版本

2、DIV+CSS实例
CSS实例一:
让IE6-IE8显示不同的内容,DIV CSS代码如下:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV IF条件实例</title>
</head>
<body>
你正在使用:
<!--[if IE 7]> 
<h2>IE7</h2>
<![endif]-->
<!--[if IE 6]> 
<h2>IE6</h2>
<![endif]-->
<!--[if IE 8]> 
<h2>IE8</h2>
<![endif]-->

<!--[if IE 9]> 
<h2>IE9</h2>
<![endif]-->
<br><br>
<strong>说明</strong>:如果你的浏览器版本为多少即会显示IE多少,针对IE6-IE9实验</body>
</html>

说明:以上针对不同IE显示不同网页内容DIV+CSS实例实验。

DIV+CSS实例二
让IE6-IE8显示不同CSS样式效果,DIV CSS代码如下:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS IF条件hack实例</title>
<!--[if IE 6]> 
<style type="text/css">
.divcss{ color:#F00;}
</style>
<![endif]-->
<!--[if IE 7]> 
<style type="text/css">
.divcss{ color:#FF0;}
</style>
<![endif]-->
<!--[if IE 8]> 
<style type="text/css">
.divcss{ color:#00F;}
</style>
<![endif]-->

<!--[if IE 9]> 
<style type="text/css">
.divcss{ color:#000;}
</style>
<![endif]-->
</head>
<body>
<div class="divcss">
DIV CSS实验提示:<br>
我在IE6下是红颜色,在IE7下是黄颜色,在IE8下是蓝颜色,在IE9下是黑色
</div>
</body>
</html>

时间: 2024-11-16 17:08:27

浏览器css hack的相关文章

常见浏览器CSS hack方法总结

ie6和ie7 #tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} IE8和IE9 :root .test { color:#963\9; } /* IE9 only */ firefox@-moz-document url-prefix(){.bt_comment_ico{top:-1px;}} ie系列*html .ico_tj{background:none;filter:progid:DXIma

浏览器 CSS Hack 收集

所谓的Hack就是只有特定浏览器才能识别这段hack代码.Hack 不是什么好东西,除非没有办法,我们尽量还是不要用着玩意. 下面是各个浏览器的CSS Hack 列表. Firefox 浏览器 @-moz-document url-prefix() { .selector { property: value; } } 支持所有Gecko内核的浏览器 (包括Firefox) *>.selector { property: value; } Webkit 内核浏览器 @media screen an

区分IE9/IE8/IE7/IE6及其他浏览器-CSS hack

记录一下这些浏览器的hack如下: 一.IE9以及以下版本浏览器 对于IE8及其以下版本的浏览器,就是使用本文标题所提到的”\9″ hack.如下代码: .ie8_9{ color:blue; /*所有浏览器*/ color:red\0; /*IE9/IE8版本浏览器*/ } 二.IE8以及以下版本浏览器 对于IE8及其以下版本的浏览器,就是使用本文标题所提到的”\9″ hack.如下代码: .ie6_7_8{ color:blue; /*所有浏览器*/ color:red\9; /*IE8以及

IE6-9版本浏览器css hack的if 语句操作有必要重申一下

1.css if hack条件语法< !--[if ie]> only ie <![endif]-->仅所有的win系统自带ie可识别< !--[if ie 5.0]> only ie 5.0 <![endif]-->只有ie5.0可以识别< !--[if gt ie 5.0]> only ie 5.0+ <![endif]-->ie5.0包换ie5.5都可以识别< !--[if lt ie 6]> only ie 6-

各种浏览器css hack

你在写css时样式表加上浏览器标识符就行了,各浏览器区别如下: IE都能识别*,标准浏览器(如FF)不能识别*:IE6能识别*,但不能识别 !important:IE7能识别*,也能识别 !important:IE8能识别\0,不能识别*,+,_,*加!important;FF不能识别*,但能识别 !important:例如style=”*width:10px!important; width:20px;”这样在IE6下宽度为10px,在IE7下宽度时20px 其中还有三种写法: 1种:widt

[转载]IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例 —— 浏览器

1.区别IE和非IE浏览器CSS HACK代码  #divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6.IE7.IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK [区别符号]:「\9」.「*」.「_」[示例]:  #divcss5{background:blue; /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black;

兼容IE6/IE7/IE8/FireFox的css hack

.color{ background-color: #CC00FF; background-color: #FF00009; *background-color: #0066FF; _background-color: #009933; } **记住上面得样式解释为顺序是 ff.ie8.ie7.ie6 ** 显示的结果: 用火狐浏览,颜色是紫色 用 IE8 浏览,颜色是红色 用 IE7 浏览,颜色是蓝色 用 IE6 浏览,颜色是绿色 IE8 最新css hack: "" 例:"

CSS技巧(二):CSS hack

什么是CSS hack CSS hack由于不同的浏览器,比如IE6,IE7,Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. CSS hack分类 hack主要分为CSS选择器hack.CSS属性hack.IE条件注释hack. CSS选择器hack:比如 IE6能识别*html .class{},IE7能识别

CSS hack大全&amp;详解(什么是CSS hack)

1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的,比如.kwstu{width:300px;_width:200px;},一般浏览器会先给元素使用width:300px;的样式,紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别,所以此样式在IE6中实际设置对象的宽度为200px,后面