2016年4月23日

[TOC]

2016年4月23日

CSS

CSS hack

CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px; _ width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;

margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍

浏览器识别字符标准对应表

从上图可以分析出以下几种情况：

1. 大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。

2. \9 ：所有IE浏览器都支持

3. _和- ：仅IE6支持

4. * ：IE6、E7支持

5. \0 ：IE8、IE9支持，opera部分支持

6. \9\0 ：IE8部分支持、IE9支持

7. \0\9 ：IE8、IE9支持

hack汇总

.element{
color:#000;             /*w3c标准*/
[;color:#f00;];         /*Webkit(chrome和safari)*/
color:#666\9;           /*IE8*/
*color:#999;            /*IE7*/
_color:#333;            /*IE6*/
}
:root .element{color:#0f0\9;}  /*IE9*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/

html头部hack

HTML头部引用(if IE)Hack：针对所有IE：< !--[if IE]>< !--您的代码-->< ![endif]-->，针对IE6及以下版本：< !--[if lt IE 7]>< !--您的代码-->< ![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

选择器前缀hack

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

http://blog.csdn.net/freshlover/article/details/12132801