目前主流的浏览器有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元素可以默认垂直居中)