各浏览器CSS hack兼容表
| IE6 | IE7 | IE8 | IE9 | Firefox | Chrome | Safari | |
| !important | Y | Y | Y | ||||
| _ | Y | Y | |||||
| * | Y | Y | Y | ||||
| *+ | Y | Y | |||||
| \9 | Y | Y | Y | Y | |||
| \0 | Y | ||||||
| nth-of-type(1) | Y | Y | Y |
IE的if条件Hack
<!--[if IE]> On
<!--[if IE 5.0]> On
<!--[if gt IE 5.0]> On
<!--[if lt IE 6]> On
<!--[if gte IE 6]> On
<!--[if lte IE 7]> On
1.<meta http-equiv="x-ua-compatible" content="ie=7" />所有高于IE7的版本运行在IE7.0版本。
2. FF下给 div 设置 padding 后会导致 width 和 height 增加所以尽量不要用padding。
3.IE8以上、chrome、firefox、opera、safari等使用margin-left：auto,margin-right:auto;可以设置最外层元素实现网页居中。IE8以下需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
4.清除浮动float,<div style="clear:both;">不过会占用位置。
5. FF 和 IE 对 BOX 理解的差异导致相差 2px 的，还有设为 float的div在ie下 margin加倍等问题.
6. 游标手指cursor，cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
7.IE6不支持图片半透明，支持PNG8全透明。
8.wekit内核浏览器,例如chrome、safari，取消textarea拖动变大textarea { resize: none;}，取消获的焦点边框样色input：focus,textarea:focus {outline: none;}。
9.wekit上传元素file，默认是button+label,IE是text+button，这个只能编写javascript插件实现统一样色。
10.<base target="_blank" />设置整个页面链接默认的打开方式。
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题，所以最好设置一个默认的样色。
12.chrome在table的将一列隐藏时，那一列会占1px像数，FF没有此问题。
13.IE8及一下版本使用VML绘图，IE9，chrome,firefox,safari,opera支持SVG、canvas，不过支持标准不一，IE8及以下可以使用google的excanvas.js库实现canvas，不过功能少。
总结：这些只是一部分，平时设计网页的时候，最好设计一个样色文件统一元素的初始属性。
评论