foreword
Hello everyone, I am your front-end partner Lizi, with 2 years of web front-end development experience. baseChengdu. Recently, after a series of closely integrated interviews, I successfully got the offer I was looking forward to. At the same time, during the interview, I also continuously summarized the more questions I asked during the interview process. I would like to share these questions with you in a skillful way. At the same time, I also hope to bring some experience to everyone's front-end learning. Let's
not talk too much, let's start today's main text~~
text
— — — — — — — — Pretend it’s a fancy dividing line — — — — — — — —
During the interview process of Lizi, companies that pay more attention to project practice will ask the following questions
1、你在工作中有遇到哪些兼容性的问题呢，你是如何解决的呢？
2、你知道有哪些常见的兼容性问题以及怎么处理的呢？
3、什么是优雅降级和渐进增强呢
4、你了解过常见的厂商前最嘛
5、H5新标签不兼容ie怎么办呢
.......
When you see these questions, do you feel that they flashed in your mind, half-conscious? My head is hot but I don't know where to start...
Don't panic, then let's start to review the compatibility problems and solutions of this web front-end. The
complete compatibility problem should be all the compatibility problems of our web three swordsmen , Nani? The Three Musketeers of the web? That's right, our HTML, css, js.
Not much to say, let's get talented
Compatibility issues in html
What should I do if the new h5 tag is only compatible to ie9?
//如果想要兼容ie低版本浏览器，需要引入html5shiv.js文件，
//其cdn写法如下：
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
PNG 24-bit images appear in the background on the iE6 browser
作成PNG8，也能够引用一段脚本处理.
CSS Compatibility
Media query compatibility
//ie9以下不支持媒体查询，需要引入response.js文件
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script>
CSS Hack
1. Attribute prefix
//IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
.red {
_color: red; /* ie6 */
*color: red; /* ie7 */
color: red\9; /* ie8/9/10 */ }
2. Selector prefix
//例如 IE6能识别 * html .class{
}，IE7能识别 +html .class{
}或者*:first-child+html.class{
}。
*.red {
} /* ie6 */
+.red {
} /* ie7 */
3. Conditional comments
//针对所有IE(注：IE10+已经不再支持条件注释)：
<!--[if IE]>IE浏览器显示的内容 <![endif]-->
//针对IE6及以下版本
<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
The double-sided distance problem caused by floating in the old version of ie
//在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍
//解决方案：在float的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有ie6会识别)
Image Gap – Vertical Orientation
//原因：图片默认基线对齐，即（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;}
By default, the Chrome Chinese interface will force text smaller than 12px to be displayed at 12px
//解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
JavaScript compatibility
//Generally use progressive enhancement and graceful degradation to solve compatibility problems
// 优雅降级ajax
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
// 渐进增强
// 前边实现上传文件的基本功能
// 后边再判断如果支持拖拽事件，就实现拖拽上传
Well, uu, the above is the handling of web compatibility in our front-end interviews. Of course, there are more content about compatibility handling in our daily work. We can also use it while summarizing at work~
