主要讲下hack的兼容用法,比较浅,哈哈
hack是主要来处理IE的兼容,不同的IE,不同的兼容方式
| /* | |
| 属性前缀法(即类内部Hack)： | |
| *color:#000; *号对IE6,IE7都生效 | |
| +color:#555; +号对IE6--IE10都生效 | |
| -color:#999; -号只对IE6生效 | |
| _color:#888; _下划线只对IE6生效 | |
| color:red\9;\9对 IE6/IE7/IE8/IE9/IE10都生效 | |
| color:blue\0; \0对IE8/IE9/IE10都生效，是IE8/9/10的hack | |
| color:green\9\0; \9\0 只对IE9/IE10生效，是IE9/10的hack | |
| #color:pink; #号对IE6/IE7/IE8/IE9/IE10都生效 | |
| */ |
看看怎么用的,来吧
| width: 300px\9; | |
| *width: 800px; | |
| _width: 300px; | |
| height: 120px; | |
| height: 60px\9; | |
| *height: 80px; | |
| _height: 100px; | |
| color: #FF6900; | |
| color: red\9; | |
| *color: deepskyblue; | |
| _color: #000; | |
| /*color:blue;*/ | |
| background: #aaa; | |
| background: #ddd\9; | |
| *background: red; | |
| _background: #aaa; | |
| box-shadow: 0 0 5px #555; | |
| box-shadow: 0 0 5px #555\9; | |
| *box-shadow: 0 0 5px #555; | |
| _box-shadow: 0 0 5px #555; | |
| /*border: 1px solid #FF6900;*/ | |
| /*border: 4px solid red\9;*/ | |
| /**border: 8px solid deepskyblue;*/ | |
| /*_border: 12px solid #000;*/ | |
| text-align: center; | |
| line-height: 100px; |
他也支持选择器的hack:
| CSS选择器的Hack | |
| *html: 在选择器前面加 *html 表示该样式在IE6以及IE6以下版本浏览器生效 | |
| :root: 在选择器前面加 :root 表示该样式在IE9及以上版本浏览器生效，对firefox和chrome也生效 | |
| *+html： 在选择器前面加 *+html 表示该样式仅仅在IE7版本浏览器生效 | |
| html>body: 在选择器前面加 html>body 表示该样式除IE6之外的所有浏览器都生效 |
例子:
| */ | |
| *html .a { | |
| color:#fff; | |
| } | |
| :root .a { | |
| /*color: blue;*/ | |
| } | |
| *+html .a{ | |
| /*color:#ff6900;*/ | |
| } | |
| html>body .a { | |
| color: green; | |
| } |
Hack还支持html文本格式的兼容,意思是他可以找到你所匹配的IE版本,然而他并不是注释,第一次用它的话,哈哈哈,有可能你会觉得他是个注释,
同时也支持大于某一个版本,或者小于It某一个ie版本
| <!--IE条件注释法(即HTML条件注释Hack)--> | |
| <!--[if IE]> | |
| <p>所有IE浏览器显示</p> | |
| <![endif]--> | |
| <!--[if IE 7]> | |
| <p>IE7浏览器显示,数字可以改 ，比如改成8，就是IE8浏览器显示</p> | |
| <![endif]--> | |
| <!--[if gte IE 6]> | |
| <p>IE6以上(包括)浏览器显示,数字可以改 ，比如改成7，就是IE7以上(包括)浏览器显示</p> | |
| <![endif]--> | |
| <!--[if ! IE 8]> | |
| <p>非IE8浏览器显示,数字可以改 ，比如改成9，就是非IE9浏览器显示</p> | |
| <![endif]--> | |
| <!--[if !IE]> | |
| <p>非IE浏览器显示</p> | |
| <![endif]--> |
同理,在head里面,我们也可以写IE的兼容,例子来了
<!--[if It IE 9]>
<style>
body{
background-image: url(img/3.png);
}
</style>
<![endif]-->
OK,关于hack的兼容应该差不多了,具体到某一个属性的兼容还需要继续查找,坑逼的IE
