IE、FF、Safari、OP不同浏览器兼容报告

1浏览器内核简介浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。

负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。

所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

浏览器内核很多，如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种，下面先简单介绍一下。

1.1Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。

Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。

此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。

由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量Bug 等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。

非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。

1.2Gecko：Netscape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Geckos 内核虽然年轻但市场占有率能够迅速提高的重要原因。

事实上，Gecko引擎的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的Netscape的一些员工一起创办了Mozilla，以当时的Mosaic内核为基础重新编写内核，于是开发出了Geckos。

不过事实上，Gecko 内核的浏览器仍然还是Firefox用户最多，所以有时也会被称为Firefox内核。

此外Gecko也是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。

1.3Presto：目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。

实际上这是一个动态内核，与前面几个内核的最大的区别就在脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。

此外该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过两者相差没有多大）。

那次测试的时候因为Apple机的硬件条件和普通PC机不同所以没有测试WebCore内核。

只可惜Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto 的发展。

1.4Webkit：苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。

Webkit引擎包含WebCore 排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。

所以Webkit也是自由软件，同时开放源代码。

在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。

限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器，这个内核本身应该说市场范围并不大；但似乎根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨，另外也是因为Safari 3终于推出了Windows版的缘故吧。

Mac下还有OmniWeb、Shiira等人气很高的浏览器。

google的chrome也使用webkit作为内核。

WebKit 内核在手机上的应用也十分广泛，例如Google 的手机Gphone、Apple 的iPhone, Nokia’s Series 60 browser 等所使用的Browser 内核引擎，都是基于WebKit。

2Safari特点:Safari被称作世界上最快的浏览器。

但是，新发布的Safari 5从性能上来说已经远远超越了其上一个版本。

苹果公司称，Safari 5的运行速度要比Safari 4快30%，比Chrome 5.0快3%。

Safari 5的运行速度甚至是Firefox 3.6的2倍多。

增加了一个Reader（阅读器），取代了以往的RSS Reader。

与其他主流浏览器一样，也增加了一个默认搜索引擎的选项；包含了Safari 5开发工具。

其中有一个“web检查器”可以显示Safari与网站的整个交互过程；增强了对HTML5的支持：包括Geolocation、全屏幕HTML5视频、HTML5视频隐藏式字幕、新的分节元素（article、aside、footer、header、hgroup、nav和section）、HTML5 AJAX 历史记录、EventSource、WebSocket、HTML5可拖移属性、HTML5表格验证以及HTML5 Ruby。

Windows版本的Safari 5将支持GPU浏览加速。

这也是很多浏览器的新特征，可以达到更快的浏览速度；历史记录可以按照日期搜索了。

Safari 5采用Nitro JavaScript引擎。

Mac版Safari 5运行JavaScript脚本的速度比Safari 4快30%，比Chrome 5.0快3%，几乎达到火狐3.6的两倍。

2.1速度对比通过使用DNS预读取，以及改进的网页缓存技术，Safari 5可以更快地打开网页。

Safari 5的扩展应用得到沙箱技术的保护，从而提高了安全性和稳定性。

2.2CSS兼容能力对比2.3JavaScript兼容对比数值越小越好以上数据来源:/pingce/pingcenormal/0906/1678394.html3CSS区别及兼容3.1什么是CSS hack？由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：在属性前加下划线(_)，那么此属性只会被IE6解释在属性前加星号(*)，此属性只会被IE7解释在属性值后面加"\9"，表示此属性只会被IE8解释3.2各浏览器CSS hack兼容表：整理二:IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别有意思的测试地址: http://knb.im/css3/3.3CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE7对FireFox*+html 与*html 是IE特有的标签, firefox 暂不支持.而*+html 又为IE7特有标签. <style>#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序*/}</style>注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””/TR/html4/loose.dtd”>3.4 常见CSS兼容性问题div类1. 居中问题div里的内容，IE默认为居中，而FF默认为左对齐可以尝试增加代码margin:auto2. 高度问题两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0 px;overflow:hidden;}3. clear:both;不想受到float浮动的，就在div中写入clear:both;4. IE浮动margin 产生的双倍距离#box {float:left;width:100px;margin:0 0 0 100px; //这种情况之下IE会产生200px的距离display:inline; //使浮动忽略}5. padding 问题FF设置padding 后，div会增加height 和width，但IE不会（* 标准的XHTML1.0 定义dtd 好像一致了）高度控制恰当，或尝试使用height:100%;宽度减少使用padding但根据实际经验，一般FF和IE的padding 不会有太大区别，div 的实际宽= width + padding ，所以div写全width 和padding，width 用实际想要的宽减去padding 定义6. div嵌套时y 轴上padding 和marign 的问题FF里y 轴上子div 到父div 的距离为父padding + 子marignIE里y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个FF里y 轴上父padding=0 且border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面7. padding，marign，height，width 的傻瓜式解决技巧注意是技巧，不是方法：写好标准头<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml">高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height 不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding列表类1. ul 标签在FF中默认是有padding 值的，而在IE中只有margin有值先定义ul {margin:0;padding:0;}2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;} 显示类1. display:block,inline 两个元素display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的的效果display:table; //for FF,模拟table的效果display:block 块元素，元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度<div>，<p>，<h1>，<form>，<ul> 和<li> 是块元素的例子display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。