CSS hack

主要测试了chrome,firefox,ie8、9、11,360浏览器. 2018年尾微软的IE游览器内核都要换成跟谷歌类似的了.


属性级Hack

_:IE6浏览器, 写法 _color:purple;
+: IE7浏览器, 写法 +color:purple;
*:IE6/IE7, 写法 *color:green;
#: IE6/IE7/IE8, 写法 #color:green;

// IE8和9. 真机测试有效的写法.
.selector {
  color: #ff0\0;/*ie8*/
  color: #f00\9\0;/*ie9+*/
}

!important: IE7/IE8/IE9/IE10/IE11, 写法 color: green !important;
\9:IE6/IE7/IE8/IE9/IE10/IE11, 写法:  color: blue\9;
\0:IE8/IE9/IE10/IE11, 写法  color: blue\0;
\9\0: IE9/IE10/IE11, color: blue\9\0;


@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */

@-moz-document url-prefix() {.font1 {color:red}} 针对Firefox浏览器的内核CSS写法


# 强制首选CSS生效属性
!important; 

例:{background:red!important; background:green;} ie6下解释为背景色green,其它浏览器解释为背景色red
				

选择符级Hack

*html .test { color: #090; }       /* IE6 */
*+html .test { color: #ff0; }     /* IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */
_:-ms-input-placeholder, :root .selector {} /* IE10及其以上版本浏览器 */
_:-ms-fullscreen, :root .selector {}  /* IE11及其以上版本浏览器 */
# 推荐使用.ie6. ie7. ie8 的前缀方式
				

条件Hack

<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->

<!--[if IE]>
<p>你在非IE中将看不到该p标签</p>
<![endif]-->

# 判断符号
大于: gt
大于或等于: gte
小于: lt
小于或等于: lte
非指定版本: !
*: IE10及以上版本已将条件注释特性移除,使用时需注意。

# 大于IE6
<!--[if gt IE 6]><![endif]-->
# 大于等于IE6
<!--[if gte IE 6]><![endif]-->
# 小于IE7
<!--[if lt IE 7]><![endif]-->
# 除IE7以外的IE版本
<!--[if ! IE 7]><![endif]-->
				

ie浏览器独有的文档注释的方式

<!DOCTYPE html>
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en"> <!--<![endif]-->