• PC端
  • IE
  • Chrome
  • FireFox
  • Safari
  • 360极速浏览器
  • 360安全浏览器
  • 搜狗浏览器
  • QQ浏览器
  • UC浏览器
• 移动端
  • Android WebView
  • iOS WebView
  • Chrome
  • UC浏览器

通常，我们会把Web浏览器分为PC端浏览器和移动端浏览器。

根据能不能看到界面，我们还可以把Web浏览器分为有头浏览器和无头浏览器。有头浏览器是指有界面的浏览器，我们可以看到它的展现。上面我们提到的那些全部是有头浏览器；无头浏览器是指没有界面的浏览器。 那么无头浏览器有什么用处呢？无头浏览器通常用来进行Web自动化测试的，它不是用来给我们普通人看的。PhantomJS就是一个无头浏览器。

还有一种有头浏览器是使用在命令行下的，叫做文本浏览器，因为在命令行下只能展示文本。links、lynx就是一种文本浏览器。

为了便于在不同操作系统之间的移植和进行功能定制，浏览器会把那些公共功能抽象出来，这种东西被称为Web浏览器的引擎或者内核。

我们可以使用Windows API包装Webkit引擎， 打造一个在Windows上可以运行的Web浏览器；

我们可以使用Linux API包装Webkit引擎， 打造一个在GNU/Linux上可以运行的Web浏览器；

我们可以使用macOS API包装Webkit引擎， 打造一个在macOS上可以运行的Web浏览器。

即便是在相同的操作系统上，不同的Web浏览器厂商可以使用相同的引擎打造出完全不同的Web浏览器来。

下面是常见的Web浏览器引擎：

• Webkit
• Gecko

我们开发的网站是运行在浏览器中的，所以，我们需要对市面上常用的浏览器都比较熟悉， 知道它们对W3C和JavaScript的兼容性，哪个版本兼容什么特性等。

Chrome、Firefox、Safari等浏览器对W3C规范的兼容性非常高， 一般不会出现什么问题。

对于前端开发者而言，IE是个刺儿头，它对W3C规范的实现总是特别缓慢， 但是，中国市场上IE的用户又是特别的多，主要是中国的Windows盗版系统用户实在太多了，IE被预装在Windows系统中，对那些普通用户来说，IE那就是首选。

在做一个网站之前，首先应该确定，需要兼容哪些浏览器，哪些浏览器的哪些版本，对于针对特定用户的，可以放弃IE。 比如一些CMS系统只是给一些后台管理人员使用的，要求它们使用Chrome、Firefox没有任何问题。 就没必要花大量的时间在IE上进行测试了。

如果我们的网站是希望任何用户都可以访问的，那么就要着重考虑IE了，因为使用IE的用户最多嘛。 对于一些大网站，现在都最低支持到IE6。IE6是Windows XP内置的浏览器，IE8是Windows7内置的浏览器， 现在市面上流行的Ghost Windows XP系统内置的浏览器都是IE8，所以，我认为， 顶多支持到IE8即可了。Windows XP虽然已经退役，但是它的用户仍然庞大！

IE8和以下版本不支持该方法，可以使用jQuery的$.trim(string)代替之。

IE8和以下版本不支持该方法，可以使用string.indexOf(prefix) == 0进行判断。

IE8和以下版本不支持该方法，可以使用string.indexOf(suffix, this.length - suffix.length) != -1进行判断。

event对象用来表示当前事件相关的一些信息。event对象的属性和方法包含了当前事件的状态。 如：引发事件的DOM元素、鼠标的状态、按下的键等等。

在W3C规范中，event对象是随事件处理函数传入的，IE9及其以上版本、其他浏览器都支持这种方式； 但是对于IE8及其以下版本，event对象是作为window对象的一个属性而存在的， 并没有当作处理函数的参数传递。

在W3C规范中，事件处理函数原型是function(event)。

为了兼容IE8，得写成如下形式：

function(event) {
    var ev = event || window.event;
    //TODO
}

在W3C规范中，event对象的target属性表示触发事件的DOM元素， 在IE8里面的window.event对象的srcElement属性表示触发事件的DOM元素， 所以，更近一步，我们，需要写成如下：

function(event) {
    var ev = event || window.event;
    var targetE = ev.target || ev.srcElement;
    //TODO
}

接下来就是标准的操作DOM了。

参考

通常，我们的水平居中的CSS如下：

.text-center {
    width: auto;
    text-align: center
}

只要把该样式应用在要居中的HTML元素上即可。 但是在IE9上确不起作用，为了兼容IE9， 应该弄成如下形式：

<div style="text-align: center">
    <img src="https://fpliustorage.blob.core.chinacloudapi.cn/blog/images/user-avatar.png"
         style="margin-left: auto; margin-right: auto">
</div>

这样，在所有浏览器上都是水平居中的。

IE8及以下版本不支持CSS3 Media Query， 可以引入respond.js解决。

IE8及以下版本不支持HTML5新增的元素， 可以引入html5shiv.js解决。

对于功能点进行检测、对不支持的功能进行hack， 可以引入modernizr.js解决。

把div设置成display:inline-block，你会发现，相邻的两个div之间会出现间隙， 但是你用调试工具去看，都没有margin，那这个间隙是哪来的？原来，我们开发的时候，是一行一行写的， 浏览器看到多个连续的换行符、空格等空白字符就会把它们合并为一个空白字符，这个空隙就是这一个空白字符占据的。

解决的办法:

方法一： 在父容器上设置CSS属性font-size: 0;

方法二： 对html文件进行压缩处理，将/>和<之间的空白字符全部去掉。 按理说，上线进行压缩是必备的，不过，我看到大量的网站不进行压缩。这是不专业的做法。 当然，你可能用的不是html文件，可能是模板引擎，每一种模板引擎都有相应的处理程序对它进行压缩处理，找对应的工具进行压缩即可。