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

95a4f7a9b391

浏览器

一.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。

二.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+$/,"");

}

}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值