常用浏览器级内核
浏览器最重要的部分是Rendering Engine,即为“渲染引擎”，一般称为浏览器内核。负责对网页语法的解释（如HTML、css、js）并显示页面。
常见的4种内核：
（1）Trident（IE内核）（IE、Maxthon、TT、The World等）
（2）Gecko（Firefox内核）（Firefox等）：C++编写的。
（3）Presto（opera7及以上版本）：opera开发的，渲染速度优化到极致，公认网页浏览速度最快的浏览器内核。
（4）WebKit（chrome、safari）：高效稳定，兼容性好。
页面兼容性问题产生的原因：
（1）浏览器对网页语法的解释的方法不同。
（2）网页制作人员编写的代码不规范。
兼容性处理
CSS盒模型
（1）margin不会影响盒子本身大小，但会影响和盒子有关的其他内容。
（2）W3C标准盒模型的content部分不包含其他部分。
它的盒子本身大小：
盒子宽度=width+padding-left+padding-right+border-left+border-right。
盒子高度=height+padding-top+padding-bottom+border-top+border-bottom。
它的盒子占据的空间大小：
宽=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right。
高=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom。
（3）IE盒模型的content部分包含border和padding。
它的盒子本身大小：
盒子宽度=width。
盒子高度=height。
它的盒子占据的空间大小：
宽=width+margin-left+margin-right。
高=height+margin-top+margin-bottom。
型怪异模式问题及解决方案
（1）问题描述：没写DTD声明。
（2）解决方案：养成写DTD的好习惯，推荐使用<!DOCTYPE HTML>。
（3）产生原因：在怪异模式下IE会按自己的内核进行网页渲染。
IE6双边距问题及解决方案
（1）问题描述：ie6下，如果对元素设置了float，同时又设置了margin-left或margin-right，margin值会加倍。
（2）解决方案：设置display为inline。
（3）产生原因：ie6内部问题。
普通文档流中块框的垂直边界问题
（1）问题描述：相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合，IE和FireFox都存在这问题。
（2）解决方案：统一使用margin-top或margin-bottom，不要混合使用。
（3）产生原因：普通文档流中盒模型的解释。
IE6、7的haslayout问题
（1）问题描述：css在ie下的解析不正确。
（2）解决方案：不是由于盒模型的计算问题，也不是由于标签的嵌套错误等原因而出现的怪异问题都可以尝试触发该标签或容器的haslayout属性。可采用手动触发haslayout来解决：推荐方法是设定标签的zoom：1，这是ie的特有属性，不会影响页面效果。
下列标签默认haslayout='true'：<html><body><table><tr><th><td><img><hr><input><select><textaera><button><iframe><embed><object><applet><marquee>.
下列css属性和取值将会自动让一个标签的haslayout='true'：
position：absolute。
float：left、right。
display：inline-black。
width、height：除auto外的任意值，height：1%就在holly hack中用到。
zoom：除normal外的任意值。
（3）产生原因：ie渲染原因。
IE6对png24格式图片的透明度支持问题
（1）问题描述：ie6下，png24图片本该透明的地方显示为浅灰色。
（2）解决方案：ie的css滤镜中有一个使png背景透明的滤镜。
写法：* html .png{background:none; filter：progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' /image/png_test.png');}
（3）产生原因：ie6内部问题。
IE6下多余3px的问题
（1）问题描述：ie6下，当对一个容器设置了float，而另一个容器中是正常文档流，处于正常文档流的容器与它前面float的容器之间会出现多余的3px。
（2）解决方案：把处于正常文档流的容器的display为inline-block。
或使用css hack,在处于正常文档流的容器中增加 _margin：-3px
（3）产生原因：ie6渲染的原因。
图片下方有空隙产生的问题
（1）问题描述：各浏览器下，有时img图片下面有空隙产生。
（2）解决方案：设置img的display为block。或设置vertical-align:top/bottom/middle。
（3）产生原因：浏览器渲染问题。
IE6无法定义1px高度的问题
（1）问题描述：IE6无法定义1px左右高度的容器。
（2）解决方案：为容器设置overflow：hidden或line-height:1px。
（3）产生原因：ei6容器的默认行高。
高度不适应问题
（1）问题描述：当内层容器高度发生变化时，外层容器的高度不能自动展开，特别是当内层容器使用padding或margin之后。
（2）解决方案：a、避免为容器中的最后一个标签设置margin-bottom。
b、或在父元素中使用padding。
c、或在对象上下增加两个高度为0的空div，并强制内容不显示。
（3）产生原因：浏览器根据css2.1中margin的使用规则进行渲染。
兼容性问题技巧
（1）写DTD声明。
（2）重置各浏览器默认属性值。
（3）同时为一个元素写float和margin-left或margin-right时，同时设置display：inline。
（4）给元素设置固定高度后，同时设置overflow：hidden。、
（5）对于文本，在使用margin、padding之前优先考虑是否可用text-indent和line-height代替。