整理前端面试题(十三):兼容性问题面试题合集

浏览器

一.Polyfill是什么?

Polyfill的准确意思为：用于实现浏览器并不支持的原生API的代码。

例如，querySelectorAll是很多现代浏览器都支持的原生Web API，但是有些古老的浏览器并不支持，那么假设有人写了库，只要用了这个库，你就可以在古老的浏览器里面使用document.querySelectorAll，使用方法跟现代浏览器原生API无异。那么这个库就可以称为Polyfill或者Polyfiller。

那么问题就来了。jQuery是不是一个Polyfill?答案是No。因为它并不是实现一些标准的原生API，而是封装了自己API。一个Polyfill是抹平新老浏览器标准原生API 之间的差距的一种封装，而不是实现自己的API。

已有的一些Polyfill，如 Polymer 是让旧的浏览器也能用上 HTML5 Web Component 的一个Polyfill。FlashCanvas是用Flash实现的可以让不支持Canvas API的浏览器也能用上Canvas的Polyfill。

这里有一堆Polyfills，有兴趣可以把玩一下：HTML5 Cross Browser Polyfills

二.Modernizr、HTML5Shiv、respond.js三者的区别？

HTML5Shiv主要解决HTML5提出的新的元素不被IE6-8识别。
Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。
Modernizr 是一个开源的JS库，最初主要用于检测浏览器的新特性支持情况，现在默认包含了html5shiv的能力。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。

总结:

一般情况下HTML5Shiv、respond这2个搭配使用。
Modernizr 包括那2个，并且比他们更强大一些。

三.标准模式与兼容模式各有什么区别？

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

四.webSocket如何兼容低浏览器？(阿里面试题)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR

五.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

//解决方案：
var page = {};
page.x = event.x ? event.x : event.pageX;
page.y = event.y ? event.y:event.pageY;

Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

六.什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。如：border-shadow
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；

七.为什么要用初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

八.IE盒模型和W3C盒模型有什么不同？

IE盒模型：margin 、 content（包含border、padding）
W3C盒模型： margin 、border、 padding、 content

CSS3中的box-sizing的属性就是为了这两种模式，border-box（IE盒明星）和content-box（W3C）

九.请分别封装添加事件和移除事件的函数，用以解决兼容性问题？

function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName,function(){
　　　　　　handler.call(elem)}); 　 //此处使用回调函数call()，让this指向elem　　
  } else if (elem.addEventListener) {
　　    elem.addEventListener(eventName, handler, false);　　
  }
}
function removeEvent(elem, eventName, handler) {
  if (elem.detachEvent) {
  　　elem.detachEvent("on" + eventName,function(){
  　　　   handler.call(elem)}); 　　　　//此处使用回调函数call()，让this指向elem　　
  } else if (elem.removeEventListener) {
  　　elem.removeEventListener(eventName, handler, false);　　
  }
}
//IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。

十.写一个function，清除字符串前后的空格。（兼容所有浏览器）？

if (!String.prototype.trim) { 
     String.prototype.trim = function() { 
         return this.replace(/^\s+/, "").replace(/\s+$/,"");
 } 
}