IE的另类CSS hack,条件注释
2008-02-22 15:06
507 查看
常看见国外的一些css的下拉菜单的源码,因为IE7.0以下版本大多数标签不支持:hover的样式,所以比较多的使用条件注释。什么是浏览器的条件注释呢?
插入代码:
<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
上面的代码就是条件注释,条件注释是在IE5.0/Win以后才被IE支持的,一般用于hack,如果你用的是IE浏览器,你就可以在页面里看到“您正在使用IE浏览器”,如果是IE以外的浏览器,就看不到这句话。为什么呢?
1. 条件注释的基本结构和HTML的注释(< !-- -- >)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3. 条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。
下面一段代码是测试在IE浏览器下的条件注释语句的效果
插入代码:
<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
<!--[if IE 5]>
<h1>版本 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>版本 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>版本 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->
如果你用的是IE 6,你会看到页面上显示“您正在使用IE浏览器”和“版本 6”。
同样的方法,我们还可以通过条件注释给页面链接一个附加的样式表文件。
插入代码:
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="style_for_ie6.css" />
<![endif]-->
这样,如果你使用的是IE 6,你链接的样式表有2个,分别是style.css和针对IE 6的style_for_ie6.css,而其他的浏览器就只链接了style.css
当然还有内部样式
插入代码:
<!--[if IE]>
<style>
#top {margin-left: 20px;}
</style>
<![endif]-->
上面的语句也只有IE可以解释。
所以通过条件注释,我们可以方便的进行CSS Hack,因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能,所以它是可以被放心地使用的。
插入代码:
<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
上面的代码就是条件注释,条件注释是在IE5.0/Win以后才被IE支持的,一般用于hack,如果你用的是IE浏览器,你就可以在页面里看到“您正在使用IE浏览器”,如果是IE以外的浏览器,就看不到这句话。为什么呢?
1. 条件注释的基本结构和HTML的注释(< !-- -- >)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3. 条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。
下面一段代码是测试在IE浏览器下的条件注释语句的效果
插入代码:
<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
<!--[if IE 5]>
<h1>版本 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>版本 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>版本 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->
如果你用的是IE 6,你会看到页面上显示“您正在使用IE浏览器”和“版本 6”。
同样的方法,我们还可以通过条件注释给页面链接一个附加的样式表文件。
插入代码:
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="style_for_ie6.css" />
<![endif]-->
这样,如果你使用的是IE 6,你链接的样式表有2个,分别是style.css和针对IE 6的style_for_ie6.css,而其他的浏览器就只链接了style.css
当然还有内部样式
插入代码:
<!--[if IE]>
<style>
#top {margin-left: 20px;}
</style>
<![endif]-->
上面的语句也只有IE可以解释。
所以通过条件注释,我们可以方便的进行CSS Hack,因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能,所以它是可以被放心地使用的。
相关文章推荐
- css Hack,用IE11模拟测试的,条件注释要找真IE去测,模拟的无效
- IE的IF条件注释使用备忘
- 使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu
- IE条件注释详解
- 条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>
- IE 条件注释详解总结(附实例代码)
- IE中的条件注释(转载自网络)
- 使用条件注释判断 IE 浏览器版本
- 条件注释判断浏览器版本<!--[if lt IE 9]>(转载)
- 网页设计中的IE条件注释
- IE下条件注释使用
- 针对主流浏览器的CSS-HACK写法及IE常用条件注释
- 关于IE条件注释(译)
- IE条件注释
- ie条件注释还能这样写
- [译]IE 条件注释
- IE条件注释可以怎么玩
- <!--[if IE]>...<![endif]--> (<!--[if !IE]>...) IE浏览器中的条件注释
- IE条件注释可以怎么玩
- IE条件注释