谈谈浏览器的兼容性

1.html部分

H5新标签在IE9以下的浏览器识别

<!--[if lt IE 9]>
 <script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

html5shiv.js下载地址
https://github.com/aFarkas/html5shiv/releases

.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0

2.CSS样式的兼容性

• css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同
  IE的条件注释hack：

<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->          
 <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

• IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍
  解决办法：display:block;

• IE6下图片的下方有空隙
  解决方法：给img设置display:block;

• IE6下两个float之间会有个3px的bug
  解决办法：给右边的元素也设置float:left;

• IE6下没有min-width的概念，其默认的width就是min-width

• IE6下在使用margin:0 auto;无法使其居中
  解决办法：为其父容器设置text-align:center;

• 被点击过后的超链接不再具有hover和active属性
  解决办法:按lvha的顺序书写css样式，
  ":link": a标签还未被访问的状态；
  ":visited": a标签已被访问过的状态；
  ":hover": 鼠标悬停在a标签上的状态；
  ":active": a标签被鼠标按着时的状态；

• 在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序

• IE6下无法设置1px的行高，原因是由其默认行高引起的
  解决办法：为其设置overflow:hidden;或者line-height:1px;

• margin在ie中和其他浏览器距离不太一样，用css hack解决

• border-radius ie下不兼容，可以用背景图的方式写入。

• border-radius ,fifter，css3的一些特性，可以根据不同浏览器加前缀-moz-,-ms-等前缀

• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

• 怎么让Chrome支持小于12px 的文字？

p{
font-size:10px;
-webkit-transform:scale(0.8);
}

• 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的

标准盒子模型：宽度=内容的宽度（content）+ border + padding +margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

• CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

• CSS优先级算法如何计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

• 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

//一般的div居中
border: 1pxsolid red;margin: 0auto; height: 50px;width: 80px;

//浮动居中（已知宽高）
border: 1px solid red;
float: left;
position:absolute;
width: 200px;
height: 100px;
left: 50%; 
top: 50%;
margin: -50px 0 0 -100px;

//绝对定位的左右居中：
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

//使用bootstrap或者element等栅格系统
前者是分成12，后者是24

//display:table
//父级设置:
display:table
//需要居中的div元素
display:table-cell;
verticle-align:middle;

• 用纯CSS创建一个三角形的原理是什么？
  需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

3.js的兼容性

• 标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；
• 事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
• window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
• 在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。
  比如var year= new Date().getYear();
• ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
• IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
  其他浏览器：parentNode parentNode.childNodes
  IE：parentElement parentElement.children

4.闭包和作用域

闭包的理解与使用
作用域相关
我把闭包和作用域放在一起理解.要理解闭包,首先要理解变量作用域.变量的的作用域无非就是两种:全局变量和局部变量.JavaScript的特殊之处就在于函数内部可以直接读取全局变量,
var n=999;
　　function f1(){
　　　　alert(n);
　　}
　　f1(); // 999
　　另一方面,在函数外部自然无法读取函数内的局部变量.
　　function f1(){
　　　　var n=999;
　　}
　　alert(n); // error
　　处于种种原因,我们有时候需要得到函数内的局部变量.但是,正常情况下,这是办不到的,只有通过变通方法才能实现.在函数内部,再定义一个函数:
　　function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); // 999
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。所以本质上,闭包就是将函数内部和函数外部连接起来一座桥梁

GET和POST的区别

区别一:
GET重点从服务器上获取资源,POST重点向服务器发送数据.
区别二:
get传输数据是通过URL请求，置于URL后，并用”?”连接，多个请求数据间用”&”连接.post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的；
区别三:
Get传输的数据量小，因为受URL长度限制，但效率较高；
Post可以传输大量数据，所以上传文件时只能用Post方式；
区别四:
get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等；
post较get安全性较高；
区别五:
get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。
post支持标准字符集，可以正确传递中文字符。

面向对象的理解

• 进行功能拆分，同一类型的事件交给专门的人做。
• 将一些事物的共性抽离出来归类
• 封装 子类继承和使用父类的部分数据和方法。
• 多态 同一类的对象调用相同的方法可以表现不同的行为
• 变量单一
• 一个接口只描述一种能力

es6

字符串拼接

• 字符串拼接用插值形式
• 支持输入html标签，用``包裹
• 查找是否存在，有两种方法

startsWith(jspang)
endsWith(jspang);

• 复制

document.write('jspang|'.repeat(3))

• 二进制、八进制转换成十进制

二进制的开始是0（零），然后第二个位置是b（注意这里大小写都可以实现），然后跟上二进制的值就可以了。
也是以0（零）开始的，然后第二个位置是O（欧），然后跟上八进制的值就可以了。

• 数字判断和转换
  Number.isFinite( xx )
• 判断是否为整数Number.isInteger(xx)
• Array.of()方法,把一堆文本或者变量转换成数组
• find( value,index,arr)
• 数组循环方法

for of

• 数组遍历方法

forEach,fiflter,map(替换)