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前端面试--浏览器兼容性问题》对你有帮助,请点赞、收藏,并留下你的观点哦!