纵有疾风起，人生不言弃。
-- 《起风了》
1：Polyfill/Polyfiller
我把它叫做垫片儿，它是一个代码片段，用于将各大浏览器之间的差异抹平。
常见的Polyfill垫片儿有html5shiv，它为不支持H5标签的浏览器（Explorer 6-9、Safari 4.x (and iPhone 3.x)、Firefox 3.x.）添加上相应的标签和样式。
还有excanvas、slcanvas等以各自的方式在不支持canvas的IE9--下实现了canvas功能。
2：Modernizr、HTML5Shiv、Respond.js三者有什么区别
● HTML5Shiv 在不支持H5新标签元素的浏览器中以createElement的方式创建这些新标签元素并为这些新创建的标签元素添加上对应的样式。以此达到支持H5新标签元素的目的。
● Response.js 主要是针对不支持响应式布局中的css3媒介查询功能的浏览器支持该功能而开发的一款快速、轻量型的垫片儿。如IE9以下版本。
● Modernizr是个JS开源库，它用于检测当前UA中可用的CSS3和H5新特性并以全局对象Modernizr的属性以及<html>元素的类提供结果。
通常情况下，我们一般使用HTML5Shiv + reponse.js即可。
Modernizr包含了两者，更为强大。
3：标准模式和兼容模式的区别
标准模式是指排版以及JS运作都是按照浏览器支持的最高标准进行运行。
兼容模式是指模拟老浏览器的行为特性让页面宽松的向后兼容显示，不至于让某些站点无法显示。
4：对于不支持webSocket的浏览器怎么做兼容？
● SockJS 它是一个浏览器JS库，为开发者提供了一个一致的、跨浏览器的JS API类似于WebSocket的对象。该API在浏览器和Web服务器之间创建了低延迟、全双工，跨域的通信通道。
在幕后，SockJS尝试首先使用本机WebSocket。如果失败了，它可以使用各种特定于浏览器的传输协议，并通过类似WebSocket的抽象表示它们。
SockJS适用于所有现代浏览器以及不支持WebSocket协议的环境。例如，限制性公司代理之后的环境。
● socket.io 效果一样，但是它并不是webSocket的实现。
● 长轮询 XHR
● 长连接的XHR 在页面中嵌入一个隐藏的iframe, 将这个iframe的src属性设置为一个长连接请求或是xhr请求。
● Flash Socket 在页面中嵌入一个使用了Socket类的Flash程序，JS通过调用此Flash程序的Socket接口与服务器接口进行通信。
5：常见的浏览器兼容性问题有哪些？解决办法是什么？
● PNG24位图片在IE6中显示会有背景，解决办法是使用PNG8位图。
● 不同的浏览对于外边距和内边距的默认值不一样，解决办法是*{margin:0;paddinng:0}。为了更好的统一浏览器的默认样式，我们一般会在项目中添加上Normalize.css。
● IE下event对象有x、y属性，但是没有pageX、pageY属性。firefox则相反。解决办法是使用前做下判断，有哪个用哪个即可。
● chrome 中会将小于12px的字体统一显示成12px，解决办法是 body {-webkit-text-size-adjust:none;}
● 被访问过的超链接不再具有hover和active样式了，解决办法是修改伪类样式顺序L-V-H-A，即:link{}; :visited{}; :hover:{}; :active{}
● IE和其他浏览器获取父节点和子节点的方式不一样，其他浏览器获取父节点是parentNode，而IE是parentElement。其他浏览器获取子节点是childNodes，IE是children。解决办法是使用前做下判断好啦。
IE各个版本 CSS样式Hack对照表
● “-″减号是IE6专有的hack
● “\9″ IE6/IE7/IE8/IE9/IE10都生效
● “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
● “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
6：说说什么是优雅降级和渐进增强？
● 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。举个例子来说，box-shadow在大多数现代浏览器中都是可以显示的，但是对于老式浏览器就不支持，这个时候就进行降级处理，降级用户体验，直接不显示box-shadow了。
● 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。举个例子来说，一开始网站加载基础功能默认使用flash进行上传，但发现用户使用的浏览器是支持H5文件上传功能的，那么就使用H5上传，让用户拥有更好的使用体验。
7：为什么要初始化CSS样式？
css初始化就是我们项目中常使用的normalize.css，目的是抹平浏览器之间对于HTML标签默认样式的差异性，达到在不同浏览器中显示页面效果统一的作用。
8：IE盒模型和W3C盒模型有什么区别？
● IE盒模型也就是box-sizing: border-box 整个盒子大小 = margin + content (content的大小包含了border和padding)。
● W3C模型就是box-sizing: content-box 整个盒子大小 = margin + content + border + padding （content大小是不包含border和padding的）。
9：请封装分别一个添加事件监听方法，和移除监听事件的方法，达到兼容各个浏览器的目的。
我们长期用的是addEventListener和removeEventListener，但是这两个在IE9以下是不支持的，IE9以下版本可以使用attachEvent和detachEvent。
10：请写一个兼容所有浏览器的，去除字符串前后空格的方法
网友评论