任务13-浏览器兼容

1. 如何调试 IE 浏览器？

1. 使用高版本 IE 的控制台，（ IE7 及以上所有版本都有调试台，按 F12 启动。 ）
2. border: 1px solid red;
3. outline: 1px solid red;
4. javascript:alert(document.get...)

2. 什么是 CSS hack？在 CSS 和 HTML 里如何写 hack？在 CSS 中 IE6、IE7 的 hack 方式？

CSS hack: 利用某些浏览器自身的 bug 写出一些特定（妥协）的样式。

CSS hack分类:

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

1. 属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
2. 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}
3. IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

参考链接：

1. 条件注释与CSS hack
2. 条件注释
3. 史上最全的CSS hack方式一览

3. 列举几种浏览器兼容问题？

1. inline-block在ie8以上才得以支持。
2. 伪类before和after ie8部分支持，以上支持。
3. 伪类link、hover、active和visited使用在非a标签元素上，IE8以下不支持。
4. 所有的html5新增语义化标签，对于IE8以下都不支持。
5. rgba和opacity设置透明度。IE8以上支持。
6. CSS3中新增canvas属性，IE9及以上支持。
7. rotate旋转属性。IE浏览器均不支持。

4. 针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？

根据浏览器用户分布而适当采用相应的措施。简单来说，如果 IE（低版本）用户多或者增益多，兼容；少或者增益少，放弃兼容。当然，这得有数据的支持。

渐进增强是保证基本效果的情况下增强效果，优雅降级是保证最恶劣情况下的基本效果。

优雅降级 ： 从复杂的现状开始，并试图减少用户体验的供给。

渐进增强 ： 从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

优雅降级意味着往回看、而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

参考链接：

1. 高效完成浏览器兼容性测试
2. 浏览器市场份额

5. reset.css 和 normalize.css 分别是做什么的？为什么推荐使用 normalize.css？

reset.css

各个标签，元素在各浏览器中的默认样式不同，造成它们去渲染相同的源代码渲染出不同的效果，为消除这种效果，reset.css将所有的元素的默认样式清除，再由开发者重新定义。

normalize.css

normalize,css的理念是尽量保存浏览器的默认样式，而不进行太多的重置，但它所提供的默认样式让各个浏览器保持了高度的一致，相对于传统的reset.css，它是一种新型的，为html5准备的优质替代方案。

• 保护游泳的浏览器默认样式而不是简单粗暴的全部清除
• 为绝大多数的html元素提供相同的一般化样式
• 对浏览器所存在的bug，让各个浏览器保持一致
• 使用一些小技巧优化css的可用性
• normalize.css是模块化的
• normalize.css支持包括手机浏览器在内的绝大多数浏览器，同时对html5中的标签、样式、排版。列表、表单、表格等内容都进行了一般化。

拓展阅读：

来，让我们谈一谈 Normalize.css

6. IE 盒模型和标准盒模型有什么区别？怎样使 IE6 7 8 使用标准盒模型？box-sizeing:border-box 有什么用？

• IE 盒模型「IE6 7 8 怪异模式（不添加 DOCTYPE）」：width = border + padding + content
• 标准盒模型：width = content

对比图：

盒模型对比.png

另外，设置DOCTYPE，即可使 IE6 7 8 使用标准盒模型。

---

box-sizing: border-box，即令盒子按照 IE 盒模型的计算规律。（即，width = border + padding + content）

如果设置了 box-sizing: border-box; 和 width 的宽度（border + padding + content）就会限定死了。在这个基础上，再设置 padding 或者 border 的宽度，这时候，就只能压榨 content 的宽度了。

补充：

flex 布局：参考链接