条件注释判断浏览器<!--[if IE]><!--[if !IE]>

最新推荐文章于 2019-03-22 17:33:25 发布

songshu92

最新推荐文章于 2019-03-22 17:33:25 发布

阅读量1.4k

点赞数 1

分类专栏： HTML 文章标签： HTML

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基础语法了解

项目	范例	说明
!	[if !IE]	“The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。”
lt	[if lt IE 5.5]	“The less-than operator. Returns true if the first argument is less than the second argument. 小于运算符。如果第一个参数小于第二个参数，则返回true。”
lte	[if lte IE 6]	“The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. 小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。”
gt	[if gt IE 5]	“The greater-than operator. Returns true if the first argument is greater than the second argument. 大于运算符。如果第一个参数大于第二个参数，则返回true。”
gte	[if gte IE 7]	“The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. 大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。”
()	[if !(IE 7)]	“Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. 子表达式运算符。在与布尔运算符用于创建更复杂的表达式。”
&	[if (gt IE 5)&(lt IE 7)]	“The AND operator. Returns true if all subexpressions evaluate to true. AND运算符。如果所有的子表达式计算结果为true，返回true”
\|	[if (IE 6)\|(IE 7)]	“The OR operator. Returns true if any of the subexpressions evaluates to true. OR运算符。返回true，如果子表达式计算结果为true。”

lte：Less than or equal to的简写，小于或等于。 lt ：Less than的简写，小于。 gte：Greater than or equal to的简写，大于或等于。 gt ：Greater than的简写，大于。 ! ：不等于，跟javascript里的不等于判断符相同。

<!--[if !IE]> 除IE外都可识别 <![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if gt IE 7]>IE7以上版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

以IE6+IE7+IE8+IE9+FF为主要研究对象
HACK原理:不同浏览器对各中字符的识别不同

CSS中常用特殊字符识别表:

* : IE6+IE7 都能识别*,而标准浏览器FF和IE8是不能识别*的;
!important : 除IE6不能识别 !important外, FF+IE8+IE7 都能识别!important ;
_ : 除IE6 支持_ 外, FF+IE8+IE7都不支持_;
\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
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了.

实例测试

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

<!--[if IE 7]> 
<h2>IE7</h2>
<![endif]-->

<!--[if IE 8]> 
<h2>IE8</h2>
<![endif]-->

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

<!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:#0f0;}
    </style>
<![endif]-->
</head>
<body>
<div class="divcss">
DIV CSS实验提示:在IE6下是红颜色，在IE7下是黄颜色,在IE8下是蓝颜色,在IE9下是绿色
</div>
</body>
</html>