开发前台的朋友都知道，尽管我们就算用CSS2.0的东西，仍然会有诸多问题，开发一个兼容良好的页面，我们身边常备的必然是IETester这款神器，它可以帮我们测试各种IE版本的情况下，我们的页面到底怎么样，然后它有一些JS、CSS查看功能。所以，做一个网站现在就兼容性就得调半天，结合IE、Firefox、Chrome来反复看外观是经常的事。好吧，来讲来我的经历吧，很久以前我在图书馆借过一本CSS Mastery的书，真心不错，然后我就踏上了这条悲剧的Web浏览器兼容之路。
主要讲下我经常遇到的问题:
1、3像素位移：IE6下的古老的问题，当对一个div用了float元素时，而div未使用时则会在两个div之间出现3个像素的间隔。修复的办法就是两者都float，或者手动调整已浮动的div的属性margin-right/margin-left为-3px。
2、div有高度：IE6下，div的高度height无论设置为多小，仍显示的是一个12px左右高度的层，这时候我一般是把line-height属性设置为0，就正常了。不过网上也有其它方案，我没怎么用过，大家自行测试吧：在定义height值的同时，还定义font-size为0，或者定义overflow为hidden。
3、overflow不管用：IE6的overflow只有在元素的height和width值都设置，且display为block的时候才有用。
4、雅黑字体不显示：IE6/7，设置了字体font-family为“微软雅黑”，却没有任何效果，这时用"Microsoft YaHei"可能会解决此问题。
5、png无透明度：IE6下，其实这个问题解决方案已经比较成熟了，有各种js文件可以帮助解决，不过我一般还是趋向于使用filter来完成少量的透明度图片处理：
1 background:url('imgs/test.png') no-repeat; 2 _background:none; 3 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='imgs/test.png');
原理就是只有IE6才能识别_开头的css元素，然后使用微软的filter来做这个透明度，虽然效率会低了点，但是少量图还是无所谓的。
6、z-index无效：IE6、IE7的绝对定位都有这个问题，具体问题如果父标签不同，想要比较z-index来实现层叠的话就会失败，IE6、7都认为先要“拼爹”，看父元素的z-index哪个大，再来比较自己的z-index属性。如果父元素没有这个值，就默认为0，唉，这IE是要闹哪样，解决方案就是一层一层地加z-index，加postion属性值，让儿子能找到爹。
其实还有很多，我也记不起了，有空再加吧。
这种乱七八糟的Bug太多了，于是网上有各种浏览器的CSS hack来帮助我们修正显示的不统一问题。
以width属性为例CSS Hack主要有：
| 用法 | 支持 |
| _100px; | IE6 |
| *100px; | IE6、IE7 |
| +100px; | IE7 |
| 100px\9; | All IE |
| @media all and (-webkit-min-device-pixel-ratio:0){选择符{100px;}} | Chrome、Safari |
| @media all and (min-0px){ 选择符 {width:100px\0;}} | Opera |
| width:100px\0; | IE8、IE9 |
| 100px\9\0; | IE9 |
另外还可以使用IE特有的条件判断语句：
<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]-->
<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。 <![endif]-->
<!--[if IE 6]> 这段文字仅显示在 IE6。 <![endif]-->
上面的语句都是通过IE专属的条件注释来完成判断，lt=小于，gt=大于,lte=小于及等于，gte=大于及等于，上面的6代表了IE版本号，我们可以取6、7、8、9...分别区别IE版本，再在中间的部分插入专属的Html代码（JS、CSS），以修正不同IE浏览器版本的问题。
转载请注明原址：http://www.cnblogs.com/lekko/archive/2012/07/23/2605098.html