web前端面试

本人是一个web前端开发工程师，主要是vue框架，整理了一些面试题，今后也会一直更新，有好题目的同学欢迎评论区分享 ;-）

web面试题专栏：点击此处

文章目录

web前端面试
前言
- HTML兼容性
- CSS兼容性
- JavaScript兼容性

前言

不同浏览器或者相同浏览器不同的版本内核，都可能引起兼容性问题，不只是dom，还有css以及js。

HTML兼容性

h5新标签只能兼容到ie9，如果想要兼容ie低版本浏览器，需要引入html5shiv.js文件，其cdn写法如下：

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

CSS兼容性

媒体查询兼容性，ie9以下不支持媒体查询，需要引入response.js文件，其cdn写法如下：

<script src="https://oss.maxcdn.com/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前端面试--浏览器兼容性问题相关推荐

web前端关于浏览器兼容性
web前端关于浏览器兼容性所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登 ...
web前端开发浏览器兼容性 - 持续更新
浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果首先我们来看一下目前市面上常见的一 ...
web前端开发浏览器兼容性
浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果首先我们来看一下目前市面上常见的一 ...
【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
web前端面试问答_Web服务面试问答
web前端面试问答在这篇文章中,我们涵盖了您需要熟悉的Web服务概念的几乎所有部分,以回答任何层级问题. 您还将在分类中找到最佳的Web服务面试问题和答案,因此只有在必要时才可以使用特定条款. 今天 ...
web前端面试总结(自认为还算全面哈哈哈哈哈！！！！）
web前端面试总结(自认为还算全面哈哈哈哈哈!!!!) 一.CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex ...
web前端面试宝典——带你直击面试重难点（40个经典题目，涵盖近90%的考点，码字2w，干货满满！）
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...
web前端面试-10大经典题（HTML基础）
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用? HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type,网页文件的文档类型 ...
web前端面试高频考点——JavaScript 篇（一）【JS的三座大山】原型和原型链、作用域和闭包、异步
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...

web前端面试--浏览器兼容性问题