整理前端面试题(十三):兼容性问题面试题合集
浏览器
一.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+$/,"");
}
}
