/* 针对Chrome谷歌浏览器内核支持的CSS样式 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
样式 /* 例如 .font1 {color:red} */
}
针对Firefox浏览器的内核CSS写法：
@-moz-document url-prefix(){
样式 /* 例如 .font1 {color:red} */
}
如果只让ie6看见用*html .head{color:#000}
如果只让ie7看见用*+html .head{color:#000}
如果只让ff看见用:root body .head{color:#000}
如果只让ff、IE8看见用html>/**/body .head{color:#000}
如果只是不让ie6看见用html>body .head{color:#000} 即对IE 6无效
如果只是不让ff、IE8看见用*body .head{color:#000}即对ff、IE8无效
针对具体属性
如果只让ie6看见用_
.head{_color:#000}
如果只让ie7看见用+与_结合的方法:
.head{+color:#f00!_color:#000}
IE8正式版hack
\9″ 例:”margin:0px auto\9”.这里的”\9″可以区别所有IE8和FireFox.
“*” IE6、IE7可以识别.IE8、FireFox不能.
“_” IE6可以识别”_”,IE7、IE8、FireFox不能.
如：
.a { color:#f00color:#f60\9 +color:#00FF00 _color:#0000FF}
从左到右分别对应 FireFoxsIE8 IE7 IE6
还有写css样式一定要记住顺序：
以下为引用的内容：
#1 { color: #333} /* Moz */
* html #1 { color: #666} /* IE6 */
*+html #1 { color: #999} /* IE7 */
css移动端的兼容性问题。一、浮动问题：我们在平时切页面时,经常会出现用完浮动(float),忘记删除.下面的布局出现莫名其妙的空白高度,导致布局调整失败，避免使用浮动；
二、1、水平居中—使用text-align；
2、margin:auto居中；
3、table-cell居中；
4、Absolute居中；
5、使用translate居中；
6、使用Flexbox居中；
7、使用calc居中；
三、常见的兼容性问题；
四、csshack；
五、cssfilter；
六、更换渲染模式；
七、浏览器内核；
八、让H5页面适应所有的iphone手机以及安卓机型的六大技巧；
九、REM布局。
#youid{width:100px/*FF下宽度为100px*/
width:120px \9/*IE8下宽度为120px*/
*width:110px /*IE7下宽度为110px*/
_width:105px /*IE6下宽度为105px*/
}
方法还有很多，但你掌握了上面几个就够了，这几个是阅读上最直观的。
