web前端面试
本人是一个web前端开发工程师，主要是vue框架，整理了一些面试题，今后也会一直更新，有好题目的同学欢迎评论区分享 ;-）
web面试题专栏：点击此处
文章目录
web前端面试前言HTML兼容性CSS兼容性JavaScript兼容性前言
不同浏览器或者相同浏览器不同的版本内核，都可能引起兼容性问题，不只是dom，还有css以及js。
HTML兼容性
h5新标签只能兼容到ie9，如果想要兼容ie低版本浏览器，需要引入html5shiv.js文件，其cdn写法如下：
<script src="/libs/html5shiv/3.7.0/html5shiv.js"></script>
CSS兼容性
媒体查询兼容性，ie9以下不支持媒体查询，需要引入response.js文件，其cdn写法如下：<script src="/libs/respond.js/1.3.0/respond.min.js"></script>
CSS Hack： 属性前缀：例如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
.red {_color: red; /* ie6 */*color: red; /* ie7 */color: red\9; /* ie8/9/10 */}
选择器前缀：例如 IE6能识别 * html .class{}，IE7能识别 +html .class{}或者*:first-child+html .class{}。
*.red {} /* ie6 */+.red {} /* ie7 */
条件注释：
针对所有IE(注：IE10+已经不再支持条件注释)：
<!--[if IE]>IE浏览器显示的内容 <![endif]-->
针对IE6及以下版本：
<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
厂商前缀：谷歌-webkit-、火狐-moz-、IE-ms-、欧朋-o-其它兼容性： ie老版本浮动造成的双边距问题：display:inline;图片间隙：父盒子设置font-size: 0; 或者图片设置display: block;块元素默认高度：overflow: hidden;
JavaScript兼容性
一般使用渐进增强和优雅降级的方式来解决兼容性问题。
// 优雅降级var xhr = null;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}// 渐进增强// 前边实现上传文件的基本功能// 后边再判断如果支持拖拽事件，就实现拖拽上传
如果觉得《web前端面试--浏览器兼容性问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
