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

前端兼容性面试题及答案

一、基础场景题

实际项目中，你怎么处理IE11与现代浏览器的样式兼容？举2个具体案例

答案：

（1）Flex布局兼容：IE11不支持flex-wrap:wrap且子元素会溢出，需给父容器加-ms-flex-wrap:wrap，同时子元素避免用flex:1（IE会解析异常），改用-ms-flex:11auto；

（2）渐变兼容：现代浏览器用background:linear-gradient(#fff,#000)，IE11需单独写-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#000000)，且注意IE只支持线性渐变，不支持径向渐变。

移动端点击元素出现300ms延迟，你遇到过吗？怎么解决？现在还需要处理吗？

答案：

遇到过，原因是早期浏览器（如iOSSafari）需判断用户是否双击缩放。解决方案：

引入FastClick库（监听touch事件，触发后阻止默认click）；

给页面加metaname=viewportcontent=user-scalable=no（禁止缩放，部分场景适用）；

现在不需要特意处理：iOS10+、Android4.4+的现代浏览器已移除300ms延迟，仅需兼容旧设备时才用上述方案。

二、CSS兼容题

开发中用了CSS3属性（如transform、animation），怎么确保低版本浏览器（如IE9）不报错且页面不混乱？

答案：

分两步：

（1）加浏览器前缀：用Autoprefixer配合PostCSS，在配置文件中指定兼容范围（如browsers:[last2versions,ie=9]），自动生成-webkit-、-moz-、-ms-前缀；

（2）降级处理：IE9不支持CSS3动画，需给不兼容的元素加静态样式兜底，比如用opacity:0.5代替transform:translate(0,-10px)的动画初始状态，避免元素位置错乱。

为什么有些项目中，设置box-sizing:border-box后，IE8还是出现盒模型异常？怎么解决？

答案：

原因是IE8支持box-sizing，但如果页面没加DOCTYPE声明（!DOCTYPEhtml），IE会进入怪异模式（QuirksMode），此时box-sizing失效，仍按IE传统盒模型解析；

解决：必须在HTML头部加标准DOCTYPE声明，同时给所有元素统一设置*{box-sizing:border-box;}，避免部分元素继承异常。

三、JS兼容题

项目中用了Promise，IE11报错“Promiseisundefined”，你怎么解决？为什么不用babel-polyfill了？

答案：

解决：用core-js按需引入polyfill，步骤：

安装core-js@3和@babel/preset-env；

在babel配置中设置useBuiltIns:usage和corejs:3，这样会自动检测代码中用到的ES6+API，只引入对应的polyfill（如Promise对应的core-js/modules/es.promise）；

不用babel-polyfill是因为它会全量引入ES6+所有polyfill，体积太大（约80KB），而core-js按需引入能减少打包体积，更适合生产环境。

IE11中，用addEventListener绑定的事件不生效，可能是什么原因？怎么排查？

答案：

可能原因：

（1）事件名称写错（如IE11不支持input事件的input名？不对，实际是IE11中input事件在动态添加的元素上可能不触发，需用propertychange事件兼容）；

（2）绑定事件的元素还没渲染（如JS写在head里，没等DOM加载完就绑定）；

排查步骤：

先在事件绑定处加console.log(元素)，看元素是否为null（若为null，则是DOM未加载完，需用DOMContentLoaded包裹）；

若元素存在，换用IE支持的事件名（如propertychange代替input，attachEvent代替addEventListener做兜底），测试是否生效。

四、移动端兼容题

开发H5页面时，遇到iOSSafari中输入框被输入法挡住的问题