浏览器内核

目前主流的浏览器有IE6/7/8、Mozilla、FireFox、Opera、Safari、Chrome、Netscape等。

浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。

常见的浏览器内核可以分这四种：Trident、Gecko、 Presto、Webkit。

Trident又称MSHTML，是微软开发的渲染引擎。IE,MaxThon,TT,The World,360,搜狗浏览器。

Gecko是C++开发的，Open Source的渲染引擎。Firefox,Netscape6,MozillaSuite.

Webkit是苹果公司基于KHTML开发的。Safari，Chrome。

Presto由Opera Software公司开始的，用于Opera的渲染引擎。Opera7及以上。

兼容：

1、<div style="height: 6px; font: 0px Arial;"></div>或<div style="height: 6px; overflow: hidden;"></div>解决ie6下不能设置很小的高度的问题。

2、<img>标签的alt属性，在IE中，alt属性相当于title属性，鼠标悬浮于上时才会显示的提示信息。在firefox中alt则是图片不存在时显示的替代文字，其它chrome、opera、safari则不支持alt属性，所以尽量用title来表现提示信息。

3、FF下给div设置 padding 后会导致width和height增加, 但IE不会.(可用CSSHacker解决)。

4、ie7下z-index失效
将父级(position为relative的元素)设置为z-index:1。

5、
img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true);    仅支持IE
 height:expression(this.height > 720 ? 720: true);
 }

6、对高度的解析：

FF中当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不
会变化，造成样式错位。 
 
解决方案：css中定义display：table;  可以自适应 。

7、浮动的区别（空格处理）

IE:对于DIV并排时候使用float关键字时候，IE 对块与块之间的空格是处理的。   
 
FF:对于DIV并排时候使用float 关键字时候，Firefox对块与块之间的空格是不处理的。   
 
建议：经常发现使用float关键字时候在Firefox显示正常，但是在IE 中会出现空格，就是这个原因；   
 
避免在div连div时候添加空格或者回车，也即是一个div紧接这一个div写；   
 
或者，将div放入li 中进行处理，这样就不会有空格的问题。

8、firefox对display:inline-block不支持，IE支持。

hack:

IE6：_        IE7:*+html       IE8:\0   

针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，

针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。     

其他整理：

1、中英文分别对齐
 英文：text-align:justify;text-justify:newspaper
 中文：text-align:justify;text-justify:inter-ideograph

2、word-wrap:break-word

      word-break:break-all（英文换行）

3、超出文字显示省略号
word-wrap:normal;
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

4、滤镜透明效果
div{filter:alpha(opacity=50);} /* for IE8 and earlier */
div{opacity:0.5;} /* for IE9 and other browsers */

5、元素的垂直居中问题

      display: table-cell;
       vertical-align: middle;  (table的td元素可以默认垂直居中)