2023年6月21日发(作者：)

整理前端⾯试题（⼗三）：兼容性问题⾯试题合集浏览器⼀.Polyfill是什么?Polyfill的准确意思为：⽤于实现浏览器并不⽀持的原⽣API的代码。例如，querySelectorAll是很多现代浏览器都⽀持的原⽣Web API，但是有些古⽼的浏览器并不⽀持，那么假设有⼈写了库，只要⽤了这个库，你就可以在古⽼的浏览器⾥⾯使⽤electorAll，使⽤⽅法跟现代浏览器原⽣API⽆异。那么这个库就可以称为Polyfill或者Polyfiller。那么问题就来了。jQuery是不是⼀个Polyfill?答案是No。因为它并不是实现⼀些标准的原⽣API，⽽是封装了⾃⼰API。⼀个Polyfill是抹平新⽼浏览器 标准原⽣API 之间的差距的⼀种封装，⽽不是实现⾃⼰的API。已有的⼀些Polyfill，如 Polymer 是让旧的浏览器也能⽤上 HTML5 Web Component 的⼀个Polyfill。FlashCanvas是⽤Flash实现的可以让不⽀持Canvas API的浏览器也能⽤上Canvas的Polyfill。⼆.Modernizr、HTML5Shiv、三者的区别？HTML5Shiv主要解决HTML5提出的新的元素不被IE6-8识别。 是⼀个快速、轻量的 polyfill，⽤于为 IE6-8 以及其它不⽀持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和max-width 特性，实现响应式⽹页设计（Responsive Web Design）。Modernizr 是⼀个开源的JS库，最初主要⽤于检测浏览器的新特性⽀持情况，现在默认包含了html5shiv的能⼒。它使得设计师可以在⽀持HTML5和CSS3的浏览器中充分利⽤HTML5和CSS3的特性进⾏开发，同时⼜不会牺牲其他不⽀持这些新技术的浏览器的控制。总结:1. ⼀般情况下HTML5Shiv、respond这2个搭配使⽤。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 : ;page.y = event.y ? event.y:;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、 contentCSS3中的box-sizing的属性就是为了这两种模式，border-box（IE盒明星）和content-box（W3C）九.请分别封装添加事件和移除事件的函数，⽤以解决兼容性问题？function addEvent(elem, eventName, handler) {　　if (Event) {　　　　Event("on" + eventName,function(){　　　　　　(elem)}); 　 //此处使⽤回调函数call()，让this指向elem　　 } else if (ntListener) {　　 ntListener(eventName, handler, false);　　 }}function removeEvent(elem, eventName, handler) { if (Event) { 　　Event("on" + eventName,function(){ 　　　 (elem)}); 　　　　//此处使⽤回调函数call()，让this指向elem　　 } else if (EventListener) { 　　EventListener(eventName, handler, false);　　 }}//IE提供了attachEvent和detachEvent两个接⼝，⽽Firefox提供的是addEventListener和removeEventListener。⼗.写⼀个function，清除字符串前后的空格。（兼容所有浏览器）？if (!) {

= function() {

return e(/^s+/, "").replace(/s+$/,""); }

}

2023年6月21日发(作者：)

整理前端⾯试题（⼗三）：兼容性问题⾯试题合集浏览器⼀.Polyfill是什么?Polyfill的准确意思为：⽤于实现浏览器并不⽀持的原⽣API的代码。例如，querySelectorAll是很多现代浏览器都⽀持的原⽣Web API，但是有些古⽼的浏览器并不⽀持，那么假设有⼈写了库，只要⽤了这个库，你就可以在古⽼的浏览器⾥⾯使⽤electorAll，使⽤⽅法跟现代浏览器原⽣API⽆异。那么这个库就可以称为Polyfill或者Polyfiller。那么问题就来了。jQuery是不是⼀个Polyfill?答案是No。因为它并不是实现⼀些标准的原⽣API，⽽是封装了⾃⼰API。⼀个Polyfill是抹平新⽼浏览器 标准原⽣API 之间的差距的⼀种封装，⽽不是实现⾃⼰的API。已有的⼀些Polyfill，如 Polymer 是让旧的浏览器也能⽤上 HTML5 Web Component 的⼀个Polyfill。FlashCanvas是⽤Flash实现的可以让不⽀持Canvas API的浏览器也能⽤上Canvas的Polyfill。⼆.Modernizr、HTML5Shiv、三者的区别？HTML5Shiv主要解决HTML5提出的新的元素不被IE6-8识别。 是⼀个快速、轻量的 polyfill，⽤于为 IE6-8 以及其它不⽀持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和max-width 特性，实现响应式⽹页设计（Responsive Web Design）。Modernizr 是⼀个开源的JS库，最初主要⽤于检测浏览器的新特性⽀持情况，现在默认包含了html5shiv的能⼒。它使得设计师可以在⽀持HTML5和CSS3的浏览器中充分利⽤HTML5和CSS3的特性进⾏开发，同时⼜不会牺牲其他不⽀持这些新技术的浏览器的控制。总结:1. ⼀般情况下HTML5Shiv、respond这2个搭配使⽤。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 : ;page.y = event.y ? event.y:;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、 contentCSS3中的box-sizing的属性就是为了这两种模式，border-box（IE盒明星）和content-box（W3C）九.请分别封装添加事件和移除事件的函数，⽤以解决兼容性问题？function addEvent(elem, eventName, handler) {　　if (Event) {　　　　Event("on" + eventName,function(){　　　　　　(elem)}); 　 //此处使⽤回调函数call()，让this指向elem　　 } else if (ntListener) {　　 ntListener(eventName, handler, false);　　 }}function removeEvent(elem, eventName, handler) { if (Event) { 　　Event("on" + eventName,function(){ 　　　 (elem)}); 　　　　//此处使⽤回调函数call()，让this指向elem　　 } else if (EventListener) { 　　EventListener(eventName, handler, false);　　 }}//IE提供了attachEvent和detachEvent两个接⼝，⽽Firefox提供的是addEventListener和removeEventListener。⼗.写⼀个function，清除字符串前后的空格。（兼容所有浏览器）？if (!) {

= function() {

return e(/^s+/, "").replace(/s+$/,""); }

}