整理关于IE6、IE7、IE8、Firefox兼容性CSS HACK问题，另外CSS3的兼容性不是很好，但是在未来有前途。\x0d\x0a\x0d\x0a1.区别IE和非IE浏览器CSS HACK代码\x0d\x0a\x0d\x0a#divcss5{\x0d\x0abackground:blue/*非IE 背景蓝色*/\x0d\x0abackground:red \9/*IE6、IE7、IE8背景红色*/\x0d\x0a} \x0d\x0a\x0d\x0a2.区别IE6,IE7,IE8,FF CSS HACK \x0d\x0a【区别符号】：「\9」、「*」、「_」\x0d\x0a【示例】：\x0d\x0a\x0d\x0a#divcss5{\x0d\x0abackground:blue/*Firefox 背景变蓝色*/\x0d\x0abackground:red \9/*IE8 背景变红色*/\x0d\x0a*background:black/*IE7 背景变黑色*/\x0d\x0a_background:orange/*IE6 背景变橘色*/\x0d\x0a} \x0d\x0a\x0d\x0a【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。\x0d\x0a\x0d\x0a3.区别IE6、IE7、Firefox (EXP 1) \x0d\x0a【区别符号】：「*」、「_」\x0d\x0a【示例】：\x0d\x0a\x0d\x0a#divcss5{\x0d\x0abackground:blue/*Firefox背景变蓝色*/\x0d\x0a*background:black/*IE7 背景变黑色*/\x0d\x0a_background:orange/*IE6 背景变橘色*/\x0d\x0a} \x0d\x0a\x0d\x0a【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox\x0d\x0a\x0d\x0a4.区别IE6、IE7、Firefox (EXP 2) \x0d\x0a【区别符号】：「*」、「!important」\x0d\x0a【示例】：\x0d\x0a\x0d\x0a#divcss5{\x0d\x0abackground:blue/*Firefox 背景变蓝色*/\x0d\x0a*background:green !important/*IE7 背景变绿色*/\x0d\x0a*background:orange/*IE6 背景变橘色*/\x0d\x0a} \x0d\x0a\x0d\x0a【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。\x0d\x0a\x0d\x0a5.区别IE7、Firefox \x0d\x0a【区别符号】：「*」、「!important」\x0d\x0a【示例】：\x0d\x0a\x0d\x0a#divcss5{\x0d\x0abackground:blue/*Firefox 背景变蓝色*/\x0d\x0a*background:green !important/*IE7 背景变绿色*/\x0d\x0a} \x0d\x0a\x0d\x0a【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。\x0d\x0a\x0d\x0a6.区别IE6、IE7 (EXP 1) \x0d\x0a【区别符号】：「*」、「_」\x0d\x0a【示例】：\x0d\x0a\x0d\x0a#tip {\x0d\x0a*background:black/*IE7 背景变黑色*/\x0d\x0a_background:orange/*IE6 背景变橘色*/\x0d\x0a} \x0d\x0a\x0d\x0a【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻松区隔IE6和IE7之间的差异。\x0d\x0a\x0d\x0a7.区别IE6、IE7 (EXP 2) \x0d\x0a【区别符号】：「!important」\x0d\x0a【示例】：\x0d\x0a\x0d\x0a#divcss5{\x0d\x0abackground:black !important/*IE7 背景变黑色*/\x0d\x0abackground:orange/*IE6 背景变橘色*/\x0d\x0a} \x0d\x0a【说明】：因为IE7可读取「!important」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。\x0d\x0a\x0d\x0a8.区别IE6、Firefox \x0d\x0a【区别符号】：「_」\x0d\x0a【示例】：\x0d\x0a\x0d\x0a#divcss5{\x0d\x0abackground:black/*Firefox 背景变黑色*/\x0d\x0a_background:orange/*IE6 背景变橘色*/\x0d\x0a} \x0d\x0a【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。\x0d\x0a\x0d\x0a以上包括了IE6\IE8\IE7\火狐浏览器兼容问题及解决方法。
1.H5网页touch滑动的时候在苹果手机上出现不流畅的问题
-webkit-overflow-scrolling 用来控制元素在移动设备上是否使用滚动回弹效果.
解决办法：给所有网页添加如下样式
说明：
-webkit-overflow-scrolling: touch当手指从触摸屏上移开，会保持一段时间的滚动
-webkit-overflow-scrolling: auto当手指从触摸屏上移开，滚动会立即停止
2. css 苹果手机按钮默认样式如何去掉
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none}
textarea { -webkit-appearance: none}
3. 如果还有圆角的问题，
** 4.苹果手机不支持box-shadow属性**
如果先给input写边框，用 border:1px solid #ccc
5、去除Chrome等浏览器文本框默认发光边框
6.去掉高光样式：
当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。
7、去除IE10+浏览器文本框后面的小叉叉，只需下面一句就ok了
input::-ms-clear {display: none}
8.H5页面写出来，在chrome中出现如下错误，只需添加如下css即可解决
*{touch-action: pan-y}
你有多少积分？貌似诱惑不够大啊。
CSS HACK 一般也就那么一点儿，主要还是看你如何使用，可以的情况下，最后不使用。
其实更多的兼容性问题，你做一下CSS RESET 就好了。
更多的兼容性问题还是在样式初始化上面，然后才是使用浮动的时候出现的偏移、加倍等问题，这时候，你再去写CSS HACK 你会发现，你会少写很多的。
网上其实可以搜到很多CSS HACK 对照表，但是，真正使用到的时候却很少。所以建议尽量少用，这样对你以后代码的优化也是有好处的。
我说的不多，但希望能帮到你。
![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
