前言
uu们，大家好，我是你们的前端小伙伴栗子，2年web前端开发经验。base成都。最近经过一系列的紧密结合的面试，成功的拿到了自己比较向往的offer。同时在面试的时候，也不断的总结了我在面试过程中问到的比较多的问题，我想将这些问题以技巧的方式分享给大家。同时也希望能够给大家的前端学习之路带来一些经验之谈
话不多说，我们就开始今天的正文内容部分吧～～
正文
— - – - – - – 假装这是一条华丽的分割线- – - – - – - -
在栗子的面试过程中，比较多重视项目实践的企业都会问到以下的一些问题
1、你在工作中有遇到哪些兼容性的问题呢，你是如何解决的呢？
2、你知道有哪些常见的兼容性问题以及怎么处理的呢？
3、什么是优雅降级和渐进增强呢
4、你了解过常见的厂商前最嘛
5、H5新标签不兼容ie怎么办呢
.......
当你看到这些问题的时候是不是感觉他们在你的脑海里一闪而过，似识非识？脑袋一热却不知道从何说起…
别慌，那么下面我们就开始复习一下这个web前端的兼容性的问题及解决方案吧
完整的兼容性问题应该是我们的web三剑客的所有兼容性问题，纳尼？web三剑客？没错就是我们的HTML、css、js啦。
话不多说，上才艺
html里的兼容性问题
h5新标签只能兼容到ie9该怎么办呢？
//如果想要兼容ie低版本浏览器，需要引入html5shiv.js文件，
//其cdn写法如下：
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
png24位的图片在iE6浏览器上出现背景
作成PNG8，也能够引用一段脚本处理.
CSS兼容性
媒体查询兼容性
//ie9以下不支持媒体查询，需要引入response.js文件
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script>
CSS Hack
1、属性前缀
//IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
.red {
_color: red; /* ie6 */
*color: red; /* ie7 */
color: red\9; /* ie8/9/10 */ }
2、选择器前缀
//例如 IE6能识别 * html .class{
}，IE7能识别 +html .class{
}或者*:first-child+html.class{
}。
*.red {
} /* ie6 */
+.red {
} /* ie7 */
3、条件注释
//针对所有IE(注：IE10+已经不再支持条件注释)：
<!--[if IE]>IE浏览器显示的内容 <![endif]-->
//针对IE6及以下版本
<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
ie老版本浮动造成的双边距问题
//在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍
//解决方案：在float的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有ie6会识别)
图片间隙–垂直方向
//原因：图片默认基线对齐，即（vertical-align:baseline）
//解决办法
//1.设置图片的对齐方式，可把vertical_align的值设置为top、middle、bottom等
vertical-align: bottom;
//2、图片块状化（块状元素不存在基线对齐）
img{
display:block;
}
//3.设置图片的浮动属性，原理：创造一个BFC环境（由于浮动元素没有高度，为解决高度塌陷问题，一般配合overflow:hiddren使用）
img{
float: left; }
.img_box{
width: 800px;
margin: 100px auto;
background-color: red;
border:1px solid black;
overflow:hidden; //父级设定超出部分隐藏，可以解决高度
}
// 4.设置父对象的文字大小为0px;（缺点：父对象不能有文字，且无实际意义）
.img_box{
font-size: 0px;}
//5.行高足够小，使基线上移
.img_box{
line-height: 0px;}
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
//解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
JavaScript兼容性
//一般使用渐进增强和优雅降级的方式来解决兼容性问题
// 优雅降级ajax
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
// 渐进增强
// 前边实现上传文件的基本功能
// 后边再判断如果支持拖拽事件，就实现拖拽上传
好了uu们，以上就是我们前端面试关于web兼容性的处理啦，当然我们日常工作中还有更多的内容关于兼容性处理。我们也可以在工作中边总结边使用哟～
