Web前端浏览器兼容面试题（含详细落地答案）.docxVIP

Web前端浏览器兼容面试题（含详细落地答案）

说明：全套题目为一线前端面试高频原题，无空洞套话，答案贴合实际开发兼容方案，覆盖JS、CSS、布局、事件、移动端、工程化兼容核心考点，适合面试背诵、复盘查漏补缺。

一、CSS兼容类（高频必考）

1、简述常见的浏览器内核及对应的私有前缀，开发中如何规范使用？

参考答案：

主流浏览器内核和私有前缀对应：

WebKit内核（Chrome、Safari、新版Edge）：-webkit-

Gecko内核（Firefox）：-moz-

Trident内核（旧IE6-IE11）：-ms-

Presto内核（旧Opera）：-o-

实际开发不会手动写全前缀，工程化统一处理：通过PostCSS配合autoprefixer，根据配置的目标浏览器版本，自动补全、删减冗余前缀，兼顾兼容性和代码简洁性。少量原生手写兼容场景，优先补全主流前缀，放弃老旧小众浏览器。

2、IE经典盒模型和标准盒模型的区别？如何统一兼容？

参考答案：

标准盒模型（W3C）：元素宽高仅包含content，padding、border会向外撑开元素整体尺寸。

IE怪异盒模型：元素宽高包含content+padding+border，设置的width/height就是元素最终整体尺寸。

兼容方案：全局统一设置box-sizing:border-box，让所有浏览器统一使用怪异盒模型