CSS浏览器兼容---判断IE版本的HTM语句

先声明一点:

在非IE的浏览器,一下的条件声明因为在<!--.....-->里面都是看做注释的,

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

判断为非IE浏览器的条件声明应改为,这样里面的<link>才有效:

<!--[if !IE]><!-->
IE ignores this
<!--<![endif]-->


  

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->\

<!--[if lt IE 9]>

加载CSS1
<!--[else]>
加载CSS2
<![endif]-->

<!--[if lt IE 9]>
加载CSS1
<!--[else]>
加载CSS2
<![endif]-->

这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范,
如果把ELSE语句去掉,则正确.

方法1:

加载CSS2
<!--[if lt IE 9]>
加载CSS1(可以把要重写的写在这里).
<![endif]-->

<!--[if lte IE 6]>

<![endif]-->

IE6及其以下版本可见

<!--[if lte IE 7]>

<![endif]-->

IE7及其以下版本可见

<!--[if IE 6]>

<![endif]-->

只有IE6版本可见

<![if !IE]>

<![endif]>

除了IE以外的版本

<!--[if lt IE 8]>

<![endif]-->

IE8及其以下的版本可见

<!--[if gte IE 7]>

<![endif]-->

IE7及其以下的版本可见

用法:

(1)

可使用如下代码检测当前IE浏览器的版本(注意:在非IE浏览器中是看不到效果的)<!––[if IE]>

       <h1>您正在使用IE浏览器</h1>      

    <!––[if IE 5]>

<h2>版本 5</h2>        <![endif]––>

<!––[if IE 5.0]>

<h2>版本 5.0</h2>        <![endif]––>

<!––[if IE 5.5]>

<h2>版本 5.5</h2>        <![endif]––>

<!––[if IE 6]>

<h2>版本 6</h2>        <![endif]––>

<!––[if IE 7]>

<h2>版本 7</h2>        <![endif]––>

<![endif]––>

那如果当前的浏览器是IE,但版本比IE5还低,该怎么办呢,可以使用<!–[if ls IE 5]>,当然,根据条件注释只能在IE5+的环境之下,所以<!–[if ls IE 5]>根本不会被执行。 lte:就是Less than or equal to的简写,也就是小于或等于的意思。 lt :就是Less than的简写,也就是小于的意思。 gte:就是Greater than or equal to的简写,也就是大于或等于的意思。 gt :就是Greater than的简写,也就是大于的意思。 ! : 就是不等于的意思,跟javascript里的不等于判断符相同

项目 范例 说明
! [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。

时间: 2024-11-10 07:55:29

CSS浏览器兼容---判断IE版本的HTM语句的相关文章

CSS浏览器兼容

CSS 浏览器兼容知识汇总 CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行. 2.margin加倍的问题 问题描述:设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug. 解决方案:在这个div里面加上display:inline; 示例讲解:<div id="imfloat"><

判断IE版本的HTML语句详解,如:[if lte IE 9]……[endif]

我们常常会在网页的HTML里面看到形如[if lte IE 9]--[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[i

CSS浏览器兼容问题总结

为什么会出现浏览器兼容问题? 由于各大主流浏览器是不同的厂家开发的,所以使用的核心也不相同,架构代码很难重合,就会产生各种各样的bug. IE6中常见的css解析bug 1)默认高度(IE6)部分块元素会拥有默认的高度 hack1:给元素添加声明:font-size:0: hack2:给元素添加声明:overflow:hidden: 2)各浏览器的按钮大小不一样/边框显示不一样 hack:统一大小(宽和高): hack1:给input外边加一个标签,给标签加边框,再取消input的默认边框: h

【引用】CSS浏览器兼容手册

CSS技巧 1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. margin加倍的问题    设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display:inline;   例如:    <#div id=”imfloat”>    相应的css为   #IamFloat{ 

CSS浏览器兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

最全的CSS浏览器兼容问题

CSS技巧    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行    2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上 display:inline; 例如: <#div id=”imfloat”> 相应的css为 #IamFloat{ float

DIV+CSS 浏览器兼容

所有浏览器 通用height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7 专用*+height: 100px; IE7.FF 共用height: 100px !important;   程序代码 height:100px;*height:120px;_height:150px; 下面我简单解释一下各浏览器怎样理解这三个属性: 在FF下,第2.3个属性FF不认识,所以它读的是 height:100px; 在IE7下,第三个属性IE

css浏览器兼容问题(在IETester及其他浏览器中亲试过)

最近在研究一些关于浏览器兼容性问题的css问题,先归纳总结如下:(1)在一些现代浏览器(opera,chrome,谷歌,safari)中,如果给块级标签如div设置padding后会导致元素的height和width增加,在IE中则不会增加,但是只在IE6中不增加,IE7以上在IETester中测试都会增加,解决办法:可以使用 !important 多设一个 height 和 width (2)使元素水平垂直居中:垂直居中:将该元素的line-height设置为元素本身的高度,再通过vertic

CSS浏览器兼容问题集(一)

CSS对浏览器的兼容性有时让人非常头疼,也许当你了解其中的技巧跟原理,就会认为也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,并且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名 CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距添加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了. 缺点是要控制内容不