今日，有幸得以阅读浏览器秘史，抄录下来，以传后世。

看完此篇你会获益匪浅，不输此行的。~~~

题记

每一个浏览器都有自己的故事
每一个浏览器都有自己的标志
为什么所有浏览器的标记都带有 mozilla 呢？
其中又有什么耐人寻味的故事？
firefox ie netscape safari 之间又发生了什么?

据远古碑文记录，很久以前。。。。。

很久很久以前有一个浏览器名字叫 NCSA Mosaic
很久很久以前有一个浏览器名字叫 NCSA Mosaic

紧接着也出现了一个 Mozilla 的浏览器 (Mozilla 的意思是 Mosaic 终结者)
后来 Mozilla 的正式发布版本是 Netscape 它把自己标称为Mozilla/1.0 (Win3.1)
由于 Netscape支持框架显示，后来框架在大家中间流行起来了，但Mosaic不支持框架。
所以网站管理员们则通过 User-Agent 判断，如果是Netscape浏览器则进入框架(html frame)的页面，如果不是Netscape 浏览器则进入没有框架的页面.

Netscape 没有风光多久，微软也推出了自己的 IE浏览器 。IE浏览器也支持 框架 但是很遗憾，网站管理员们不认识它呀，因为IE的 User-Agent 没有Mozilla 所有没有人理它。后来微软抓狂了，你们不就是只认识User-Agent 头里有 Mozilla 字符的浏览器么，于是宣称自己是“兼容Mozilla”的，开始模仿Netscape，把自己标称为Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)。这样一来 IE 也有了Mozilla (其实是伪装的...) 所以那些框架也能看到了.

后来随着微软把浏览器捆绑进自己的操作系统里一起卖，随就爆发了浏览器大战。结果大家都很清楚，Netscape失败了。而微软大胜了，至今微软的IE依然影响着 w3c 影响着所有浏览器。

Netscape 失败后重生为Mozilla 构造了Gecko，标称其为Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826，Gecko属于渲染引擎，表现优异。Mozilla开发了Firefox，标称为Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0，并且Firefox表现也非常优秀.

由于 Gecko 的优秀，网站管理员们会判断浏览器是否是 Gecko 的，如果是则把更先进 更漂亮页面显示给这个浏览器，其他浏览器就没有这个待遇了。

(比如现在的HTML5 , 如果我判断是你firefox的新版本则跳转到地址1，如果是ie则去地址2)

看到 Gecko 能看到这么漂亮的页面 Linux 的平台的孩子们很桑心，因为他们创建了基于KHTML引擎支持的Konqueror也跟 Gecko 一样优秀，但却不带有Gecko而被识别。结果Konquerer开始伪装自己“像Gecko”那样以看到更漂亮的网页，并标称自己为 Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD)(KHTML, like Gecko)，这个世界就抽风了....

Apple开发了Safari，使用了KHTML，同时也增加了很多新特性，后来另起炉灶叫了WebKit，但是它有希望能够看到那些为KHTML编写的网页，于是Safari标称自己为Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5，就更加混乱了.

Google也开发了自己的浏览器Chrome，使用了Webkit，有点像Safari，希望能看到为Safari编写的网页，于是决定装成Safari。Chrome使用了WebKit渲染引擎，想装成Safari，Chrome宣称自己是Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko)Chrome/0.2.149.27 Safari/525.13

最后:
IE伪装成 Mozilla
webKit 伪装成 KHTML
KHTML 伪装成 Gecko

opera宣称“允许用户自己决定让浏览器装成谁”，它的菜单中提供了Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.51， Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.51，Opera/9.51 (Windows NT 5.1; U; en) 供大家来选择，选谁是谁
最后 opera 伪装成上面任何浏览器！！！

同时所有的浏览器又都伪装（宣称）自己是 Mozilla！！！
就是这样，把自己伪装得自己妈都不认识了，谁都不是谁的，谁也是谁的是。总之浏览器一塌糊涂.........

为什么有-webkit-margin-before等等属性？？？

-webkit-margin-before 属性的来由：

<pre class="best-text mb-10" style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word;">总的来说：这是CSS3.0的对于文章段P容器的定义方法语句！
display:block这个样式，只定义了P容器为一个块;
后面四句是CSS3中的样式定义方法；
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
分别定义p的上边距和下边距的数值是1倍字体高度，如10px像素的字，那么边距就为10px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
上面二句则定义为左右边距都为0PX，这个应该好理解；
所以以上
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
相当于CSS2.0中的
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 0px;
margin-left: 0px;
}

但由于CSS3.0要求浏览器版本较高，所以国内并没有流行CSS3.0样式，依然以CSS2.0为主流，但以后应该是CSS3.0的天下，因为它代表着先进性。

下面是讲下它的由来：

其实这就是W3C样的CSS3的一个定义P容器内容的样式：
“-webkit-margin-before”、“-webkit-margin-after”，“-webkit-margin-start”，“-webkit-margin-end”
这个是CSS3阶段提出的一个属性，现在甚至连草案都没进，目前只有webkit支持。
before、after、start、end是用在对文本的。比如说，中文和英文是从左到右，从上到下阅读的，那么，before = top， start = left，end = right，after = bottom。这叫做“writing-mode”，简单来说就是书写方式。
但是，日文的书写方式就不一样了，他们是从上至下，从右到左书写的。那么在这种write-mode下，before = right， start = top，end = bottom，after = left。
margin-before的用意就是，不论是哪种writing-mode，我们都可以设定“开始那边的边距”这样的内容，而不需要为了适应不同的writing-mode写几种margin。
关于writing-mode，w3c有详细的介绍，看完就懂了。
webkit指的是一种HTML排版引擎，作用就是把根据HTML和CSS的代码显示出页面。最初是Apple公司的一个开源项目，他们自家的浏览器Safari有用。之后Google也使用这个排版引擎加上自己的V8 Javascript引擎建立了一个开源的浏览器项目Chromium，并且利用这个项目只做了自家的浏览器Chrome。同时这两家在移动平台上的浏览器也是用Webkit内核的。因此，随着iOS和安卓移动终端的普及，用Webkit的浏览器也越来越多。而得益于Chromium引擎，在PC平台上也有很多Webkit浏览器，比如360呀，世界之窗呀，枫树浏览器呀，太阳花浏览器呀，搜狗浏览器呀，遨游3呀，猎豹浏览器呀。基本上说自己是双核，有什么极速模式的，都是用的Chromium。相对应的，微软的IE浏览器用的是Trident排版引擎，也就是常说的IE核心，火狐浏览器也有自己的Gecko排版引擎。
而Apple的iBooks同样也用了webkit作为排版引擎，所以iBooks和webkit内核的浏览器有很多相似之处。而Sigil这个编辑软件，用的则是Chromium，因此也是webkit内核的。看看Sigil的预览模式就知道它肯定是用的Chromium了。
在CSS属性能中，我们常常能看到-webkit-，-moz-之类的前缀，这种就叫做浏览器私有前缀，是浏览器对于新CSS属性的一个提前支持。-webkit-是webkit内核的，-moz-是Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。
为什么要有私有前缀呢？因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是w3c不会为这个属性制定标准，而是要走很复杂的程序，经过很多审查。而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更，就会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性，等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。
比方说，Chrome 10是不认border-radius这种写法的，只能用webkit-border-radius，而Chrome12就能认了。于是在写CSS的时候，这样写就能确保Chrome10和Chrome12浏览网页的时候都能够正确显示。</pre>

总结：贵圈（浏览器圈）真乱。遂大怒，眼不见为净，溜了溜了。片刻，刚怎么了？贵圈乱归乱，饭还是要吃的，有什么吩咐，您说？（洗耳以待贵圈的更新）

旁征博引：
http://tieba.baidu.com/p/939896169?see_lz=1
https://www.cnblogs.com/guyw/p/4369653.html