五大主流浏览器的内核，前端在IE浏览器中常见的兼容问题

Posted 2022-12-08 Jmytea

一 标题五大主流浏览器及其内核

1、Trident 代表作：IE
元老级内核之一，由微软开发，并于1997年10月首次在ie 4.0中使用，凭借其windows垄断优势，
Trident市场占有率一直很高。然而垄断并非，没有竞争就没有进步，长期以往，Trident内核一度停滞不前，
更新缓慢，甚至一度与W3C标准脱节。2011年，从ie 9开始，Trident开始支持html5
和CSS 3，因此我们也经常会看到有些网站在浏览时会提示用户（
在Internet Explorer 9.0+以上浏览效果最佳）。
前端程序员做浏览器兼容一般也不再会考虑ie 8之前的浏览器了。

2、Gecko 代表作：Mozilla FireFox
元老级内核之一，由Netscape公司Mozilla组织开发。
1998年，Netscape在于IE浏览器竞争失利之后，
成立了非正式组织Mozilla，由其开发新一代内核
，后命名为“Gecko”。FireFox也是这班人开发出来了，
因此这也就是Mozilla一直使用的内核。
Gecko的特点是代码完全公开，因此其开发程度很高，
全世界的程序员都可以为其编写代码， 增加功能。

3、WebKit : 苹果 & 谷歌旧版本
这是苹果公司开发的内核，也是其旗下产品Ssfari浏览器使用的内核。
Webkit引擎包含了WebCode排版引擎和javascriptCode解析引擎，
分别是从KDE的KHTML和KJS衍生而来，它们都是自由软件，在GPL条约下授权
，同时支持BSD系统开发。 Chrome、360极速浏览器以及搜狗高速浏览器也使用Webkit作为内核
（在脚本理解方面，Chorome使用自己研发的V8引擎）。

4、Blink : 代表作：谷歌 & Opera
这是由Google和Opera Software开发的浏览器排版引擎，
Google计算将这个渲染引擎作为Chromium计划的一部分 并且在2013年4月公布了这一消息 。
这一渲染引擎是开源引擎Webkit中WebCore组件的一个分支
，并且在 Chrome（28及往后版本）、 Opera（15及往后版本）浏览器中使用

5、Presto ( Opera前内核 已经废弃 )

二、前端在IE浏览器中常见的兼容

A：图片png24格式的兼容，png24格式在IE6上不透明
hack：把png24格式换成png8或者GIF格式
B：默认高度 (如果是需要看不见一定要加height：0；如果是需要其他的数值，那么就给其他的数值)
描述：在IE7或者IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;
C、双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;
D、在IE6及更低版本的浏览器里，如果想去掉input的默认边框，不能设置border：none；
hack：设置inputborder：0；
E、如果设置了input的高度，在其他浏览器上显示的value的内容是垂直居中的，但是在ie6上是在顶部的
hack：给input添加一个行高等于它的高度。
F、在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）
hack：给右面的浮动元素添加声明：clear:right;
G、IE7及以下浏览器li有时候会莫名的向下撑大3-4像素。
hack:给li添加一个 +margin-top：-3px或者-4px