说到浏览器兼容问题我们要讲到hack 他是干嘛用的呢？ 兼容代码用的，让不同浏览器达到同样的效果
ie 有很多兼容性问题 ，他有哪些兼容性问题呢，首先呢 它自己高版本都不兼容自己的低版本
所有呢我们这里主要聊一下它的问题，也是前端开发中面试经常会被问到的问题！
我们说到兼容 要使用我们的hack
那么hack分为两种
html hack
css hack
html的hack写在我们头部 <head><head>标签中的
这里我们常用的就是IE的兼容了
比如我们这段资源只需要在ie中进行展示
我们可以写我们的条件注释语法，只有ie能识别，其他浏览器都识别不了，确实有用
栗子：
<!--[if lte IE 8]>
// 文本或者资源都可写，IE8及一下能加载
内容12313132123
<link rel="stylesheet" href="https://unpkg.com/element-ui/index.css">
<![endif]-->
<!--[if IE 8]>
// 文本或者资源都可写， 只有IE8能使用
内容12313132123
<link rel="stylesheet" href="https://unpkg.com/element-ui/index.css">
<![endif]-->
<!--[if gte IE 8]>
// 文本或者资源都可写， IE8及以上能使用
内容12313132123
<link rel="stylesheet" href="https://unpkg.com/element-ui/index.css">
<![endif]-->
只需要写入支持的浏览器类型 和对应的版本就好了
IE5 - IE9 支持注释扩展 其他版本不支持
所有说IE是真的太狗了，自高版本不支持自己低版本，hack也一样不是所有的IE都支持
现在微软已经放弃IE了
常用的有标识
lte 小于或等于
lt 小于
gte 大于或等于
<!--[if IE]><![endif]--> 所有IE都识别 (IE 5-9版本,hack支持5-9IE 其他版本IE 不支持)
<!--[if IE 6]><![endif]--> 只匹配当前的版本 IE 6
<!--[if !IE]><![endif]--> 只有IE不识别，其他都识别 （！感叹号）
上面就是html hack 的使用
测试中发现ie浏览器不兼容vuex
当项目中使用到vuex时，处理这个兼容问题也很简单
先安装一个依赖 babel-polifill
npm install --save babel-polyfill
然后在webpack配置入口文件中改写
默认写法 entry:'./src/main'
改写 entry:['babel-polifill','./src/main']
在重新运行项目就可以
css hack
hach符 _（下划线） -（中划线）
给属性添加hack符
_background:red (IE 5 6 有用，其它版本ie无效)
-background:red (IE 6 有用，其它版本ie无效)
只有6-7 能识别下面的字符 其他版本都不识别
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < >
hack符 $
$color:red
8-9-10 能识别 \0
font-size:30px\0;
* html div{
background: red
}
上面祖先选择器只在IE 5 6里面能识别
其他高版本浏览器认为 html 已经是祖先级，识别不了
div,{
font-size: 40px
}
只有5-6-7能识别
p > span {
color:yellow
}
后代选择器 IE 5-6 不支持 ，其它版本都支持
盒子模型兼容性问题，经典面试题目。 一般不会直接问你什么是盒子模型。 先会问样式的兼容问题，遇到过哪些？ 你回答用hack。接下来会问你hack的使用， 再到IE盒子模型兼容性怎么处理。 不管怎么问，听到浏览器兼容性就是用hack处理的，讲一下html，css 的hack 的使用。如果问你盒子模型处理过没有，那就讲普通盒子模型和，IE盒子模型的区别，再谈如何处理，完成作答即可。
浅谈盒子模型：
F12开启控制台调试，
第一行上面有 箭头，切换到手机调试模式，还有 elemnt consloe 等功能可以选择
我们点击这个箭头激活
鼠标移动到元素上，可以看到每个元素都是一个色块，是一个矩形结构。
四个部分组成
content padding border margin
普通盒子模型计算内容区域的宽度width
只包括 content 部分的宽度
IE盒子模型计算宽度会计算content + padding + border
三个宽度相加得到的width
各个浏览器初始化值不一样，比如margin padding所以需要将这些初始值设置一下
margin:0,
padding:0,
box-sizzing:border-box,
... 还有很多配置需要初始化这里不一一写了，
box-sizzing 这个属性很重要 它有三个值
conttent-box, 以元素的内容区域向外进行绘制padding 和 border
border-box ,以元素的内容区域向内绘制padding和border
inherit 继承父元素的box-sizzing属性
栗子
当元素设置了
box-sizzing：content-box
width：100px，
height：100px;
padding:10px;
bodder:10px solid red;
如果100px 100px内容区域写满了内容
我们看到的效果是 内容区域不会被挤压 边框和内边距，从文本区域向外扩展，
会影响页面整体布局（自己设置的宽高，管理不了自己的padding和border）
box-sizzing：border-box
我们很明显看到的是文本被挤压了，padding和bodder 向内扩展
设置的宽度和高度，就是元素的宽度和高度，你继续设置padding和border 都不可以向外扩展，
避免影响整个页面的布局（自己设置的宽高，可以管理自己的padding和border,自己内部想怎么
乱来都行，不会影响外部布局）
我们在项目初始化时会通过初始化配置box-sizzing：border-box
标准盒子模型
盒子的的宽度 =
margin-left + border-left+ padding-left+ width +
padding-right + border-right+ margin-right
在浏览器中点击元素 会显示元素的大小
但是这个宽高值，我们会发现是没有加上margin值的
浏览器显示的宽高是以元素的border为边界，值为元素实际大小，
所以我们控制台显示的盒模型大小和我们浏览器上看到的
实际值不一样
我们所说的盒子模型大小
我个人认为应该是元素的空间尺寸，所以加上了margin值，margin占据的空间是不会被
其他元素使用的，元素的实际大小不会收到margin影响
IE盒子模型
盒子的的宽度 =
margin-left + padding + margin-right
