CSS浏览器兼容问题

兼容问题的罪魁祸首-各大浏览器的内核

1. *Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。
2. *Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
3. *Webkit : 代表作品Safari、Chrome 、傲游浏览器3， 是一个开源项目。
4. *Presto : 代表作品Opera(前内核)，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Opera现已改用Google Chrome的Blink内核。
5. *Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

图片四像素问题：嵌套图片的容器没有添加高度(ie6没有此问题)
解决办法：
1.给图片添加displa：block；（不推荐使用会改变img的元素类型）
2.给图片添加vertical-align属性什么属性值都可以（top bottom middle）

IE6中双倍编剧问题：一个居左一个居右浮动的元素，放进容器中并对元素设置了左边距（margin-left），或者右边距时在IE6中会产生设置数值的双倍
解决办法：
给添加margin 的元素 添加display：inline

a标签嵌套图片在IE浏览器中会有蓝色的边框
解决办法：
给img 添加border：0； （注意border：noneIE6不识别）

默认高度问题：在IE6及以下的版本中小于18px的元素拥有默认的高度
两种情况：
1.当前元素没有设置高度的情况下 清除默认高度
解决办法：
1）给元素设置font-size：0；
2）给元素添加overflow：hidden； height：0；
2.当前元素设置了高度并且小于18px 的情况下
1）给元素设置font-size：0；
2）overflow：hidden；

百分比bug在IE6及以下版本中解析百分比的时候，会按照四舍五入计算从而导致50%+50%大于100%的情况
1.一个左浮动一个右浮动的情况：给掉下来的加_clear:both/right
2.同时左/右浮动：_clear:both/right
切记千万不要用clear:left 加上_过滤器是为了 不影响常规浏览器

当li里面的a转换成块元素的时候，如果想要让所有的列表项都在同一行上或者呈现阶梯状显示，需要给li和a都设置浮动(float)属性，否则，IE6里面会出现每个li独占一行的情况。

最小高度和高度自适应引发的兼容性问题
最小最大宽度高度 IE6不识别 IE设置了宽高 自动有最小限制的功能（由于IE属于怪异)
解决办法
1：min-height：value； height：auto！important； height：value；
2：_height:100px；min-height:100px；
建议用第一种