Web前端兼容性面试题及答案.docxVIP

Web前端兼容性面试题及答案

1.开发中遇到过CSS样式在不同浏览器显示不一致的情况吗？举2个例子并说明解决方法

答案：

常见场景：

①flex布局在IE10/11下异常（如子元素溢出不换行、align-items失效）

解决：IE10需加-ms-前缀（display:-ms-flexbox），IE11不支持flex-wrap:wrap时，可改用浮动+宽度计算兜底，或限制子元素最大宽度避免溢出；

②按钮默认样式差异（Chrome默认有边框，Safari有内边距）

解决：用通用样式重置（如button{border:none;padding:4px8px;outline:none;}），或引入Normalize.css（保留有用默认样式，修复浏览器bug，比传统reset.css更轻量）。

2.IE8及以下浏览器不支持addEventListener，怎么实现事件绑定的兼容？

答案：

需判断浏览器支持的事件绑定方法，写兼容函数：

functionbindEvent(el,eventType,handler){

if(el.addEventListener){//现代浏览器

el.addEventListener(eventType,handler,false);

}elseif(el.attachEvent){//IE8及以下

//注意事件名要加on，且this指向window，需手动绑定

el.attachEvent(on+eventType,function(){

handler.call(el);//让this指向当前元素

});

}else{//极旧浏览器

el[on+eventType]=handler;

}

}

3.移动端开发时，Safari浏览器有哪些特殊兼容问题？怎么处理？

答案：

①输入框聚焦时页面被顶起不回落

解决：监听blur事件，触发时用window.scrollTo(0,document.documentElement.scrollTop||document.body.scrollTop)强制回滚；

②点击事件有300ms延迟（早期为判断双击缩放）

解决：引入FastClick库（需在DOM加载完成后初始化FastClick.attach(document.body)），或给页面加metaname=viewportcontent=width=device-width（现代Safari已优化，但低版本仍需处理）；

③不支持CSSsticky定位

解决：用position:fixed配合JS监听滚动事件模拟，或改用position:relative+父容器overflow:auto兜底。

4.如何让低版本浏览器（如IE9）支持Promise、Array.prototype.includes等ES6+特性？

答案：

需结合“转译”+“Polyfill”：

①转译：用Babel将ES6+语法转成ES5，需配置@babel/preset-env（在.babelrc中指定兼容目标，如targets:{ie:9}）；

②Polyfill：补充浏览器缺失的API（如Promise、includes），推荐用core-js@3（需在入口文件引入importcore-js/stable;importregenerator-runtime/runtime），避免用废弃的babel-polyfill；

注意：需通过.browserslistrc文件明确兼容范围（如ie9-11,chrome=49），让工具自动按需引入Polyfill，减少冗余代码。

5.图片在Retina屏（如iPhone）上显示模糊，怎么解决？

答案：

核心是让图片像素密度匹配屏幕设备像素比（DPR）：

①用srcset+sizes标签适配：

img

src=img-1x.jpg

srcset=img-1x.jpg1x,img-2x.jpg2x,img-3x.jpg3x

alt=示例图

（1x对应普通屏，2x/3x对应Retina屏，浏览器自动选择）；

②背景图用background-image配合image-set：

.bg{

background-image:url(img-1x.jpg);

background-image:-webkit-image-set(

url