通过合作网站登录
阿邦网
阿邦教育频道>dreamweaver >DIV+CSS布局> 针对IE的CSS hack内容汇总

针对IE的CSS hack内容汇总

314人关注
针对IE的CSS hack内容汇总[点击放大]
针对IE的CSS hack内容汇总 来源:黄超
    在前一篇文章中介绍了针对众多浏览器的多种CSS Hack技术,由于浏览器的版本众多,仅针对IE浏览器CSS Hack就有许多种,下面我将常用的进行汇总以便参考。

IE的if条件Hack

IE的if条件Hack可以让IE区别于其它浏览器和IE个版本之间的浏览器,它利用<!--[if IE]>...<![endif]-->这样的语法让IE浏览器对齐进行解析,属于IE浏览器专有。
<!--[if IE]> Only IE <![endif]--> 所有的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 IE]>...<![endif]-->之间内容的具体用法:
<!--[if IE 7]> <link rel="stylesheet" href="../css/ie7.css" type="text/css" media="screen" /><![endif]--> 可以像这样链接一个CSS文件
<!--[if IE]> <style> .clearfix {display: inline-block;} </style> <![endif]--> 也可以像这样直接输入一行CSS代码

针对不同版本的IE CSS Hack

由于都是IE浏览器,所以可能有几个版本对某种方法都可以解析,所以在这时只能用CSS的书写顺序和独有特性来区分它们,比如针对IE8的定义方法。 IE8还没有独有的定义方法,所以只能用它支持的方法和其它浏览器的独有方法在加上CSS书写顺序达到对它Hack的目的,如:
.font { color:black; /*所有浏览器都会显示为黑色*/ color: red\9; /*IE6、IE7、IE8会显示红色*/ *color: blue;  /*IE6、IE7会变为蓝色*/ _color: green;  /*IE6会变为绿色*/ }
利用以上的方法可以使IE6、IE7、IE8三种浏览器和其它IE浏览器所显示的字体颜色都不相同,IE6为绿色,IE7为蓝色,IE8为红色,其余为黑色,这就是书写顺序加独有特性起到的作用。 下面列出几种独有特性:
*+html  select {…} 仅IE7与IE5.0可以识别 *+html select {... !important;} 仅IE7可以识别 * html  select {…} html/**/ >body  select {…} _property {...} IE6及IE6以下版本可以识别 * select {…} IE8以下IE浏览器都可以识别 >property !important;  IE7、IE8可以识别该规则
以上select是选择器,比如div、p或.style等,property是属性,如color、font-size等,如果有不明白的地方请参阅CSS选择器详解CSS的class与id详解
 
(0)

网友评论

已有 4 条 查看全部>>

网友 IP:218.80.231.*  2011-11-01 10:46:56 回 复
请问一下,
A:*html,*body{ height: 100%; overflow: hidden; }
B:_html,_body{ height: 100%; overflow: hidden; }
有B这种写法么?
[回复] DREAMWEAVER帮手 黄超   2011-11-26 21:41:10
通常用下划线的方式是针对IE6的hack写法 *号是针对所有IE的写法
A是先让所有的IE解析,然后用下划线再对IE6单独定义
网友 IP:58.62.216.*  2011-09-20 15:30:04 回 复
分享光荣!!!
[回复] DREAMWEAVER帮手 黄超   2011-10-29 21:54:53
谢谢您的关注
网友 IP:119.78.214.*  2011-04-23 18:04:55 回 复
挺好的东西,谢谢咯,我分享了。。
[回复] DREAMWEAVER帮手 黄超   2011-04-25 21:54:27
有用就好。谢谢支持
我要评论
我要提问

已有 4 条 查看全部>>

用户须知
评论小提示: 评论提交成功后,为什么不能马上在页面中看到?

- 我们的帮手会对您的评论/留言进行审核或解答,之后评论才会出现在该页面上哦。

我怎样能最快找到帮手的回复?

- 推荐注册、登录后发表评论/留言,点击页面顶部的用户中心,可方便查看到回复。

免费订阅 集中阅读  免费订阅 集中阅读
iPad生活帮手杂志免费提供