Hack、自适应、针对浏览器写样式随手笔记

1.hack
“-″减号是IE6专有的hack
* IE6 、IE7识别
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ 是IE8的hack
“\9\0″ 是IE9/10的hack

符号
IE6 IE7 IE8 FF
* √ √ × ×
!important × √ × √
_ √ × × ×
\9 × × √ ×
*html √ × × ×
*+html × √ × ×

<!–[if IE 5]>仅IE5.5可见<![endif]–>
<!–[if gt IE 5.5]>仅IE 5.5以上可见<![endif]–>
<!–[if lt IE 5.5]>仅IE 5.5以下可见<![endif]–>
<!–[if gte IE 5.5]>IE 5.5及以上可见<![endif]–>
<!–[if lte IE 5.5]>IE 5.5及以下可见<![endif]–>
<!–[if !IE 5.5]>非IE 5.5的IE可见<![endif]–>

2.CSS3针对浏览器的写法

动画转换
例：transform:translate{200px,100px;}
-webkit-transform:translate{200px,100px;} /*safari,chrome*/
-ms-transform:translate{200px,100px;} /* IE */
-o-transform:translate{200px,100px;} /*opera*/
-moz-transform:translate{200px,100px;} /*Firefox*/

3.自适应：<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=false;" name="viewport">

  苹果4 @media screen and (max-width: 350px) {.title3{ padding-top:20px;}
  .time{ padding-top:20px;}
  两个条件连接中间用and连接。例如：@media screen and (min-width: 350px)and(max-width:500px) {.title3{ padding-top:0px;}

4.针对浏览器写样式：

 @-moz-document url-prefix() { .selector { property: value; } }针对火狐写样式 hack
 例子：@-moz-document url-prefix(){ .demo{color:lime;}}

 Webkit枘核浏览器(chrome and safari)
 @media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
 例子: @media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }