170424-css-css hack

各种版本浏览器之间对css进行解释之后，网页内容会产生误差，和js一样，一个效果在各个版本浏览器中显示不同，甚至失效。采取的不同css样式来解决这些问题就叫做 CSS hack。

css hack大致可以分为三种表现形式

1. css属性前缀法

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

_和-：仅IE6支持

*：IE6、E7支持

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

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

\0\9：IE8、IE9支持

Demo1

.hack{

/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/

background-color:red;/* All browsers */

background-color:blue!important;/* All browsers but IE6 */

*background-color:black;/* IE6, IE7 */

+background-color:yellow;/* IE6, IE7*/

background-color:gray\9;/* IE6, IE7, IE8, IE9, IE10 */

background-color:purple\0;/* IE8, IE9, IE10 */

background-color:orange\9\0;/*IE9, IE10*/

_background-color:green;/* Only works in IE6 */

*+background-color:pink;/*  WARNING: Only works in IE7 ???*/

}

Demo2

.iehack{

background-color:orange;/* all - for Firefox/Chrome */

background-color:red\0;/* ie 8/9/10/Opera - for ie8/ie10/Opera */

background-color:blue\9\0;/* ie 9/10 - for ie9/10 */

*background-color:black;/* ie 6/7 - for ie7 */

_background-color:green;/* ie 6 - for ie6 */

}

2. 选择器前缀法

选择器前缀法，例如IE6能识别*html .class{}，IE7能识别*+html .class{}

??为什么和css属性前缀 不一致

@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有效

3. IE条件注释法

对所有判断语句内的代码生效（不仅只有css）

针对所有ie（ie10+已经不再支持）

这段文字只在IE6以上(包括)版本IE浏览器显示这段文字只在IE6以上(包括)版本IE浏览器显示