任务13

1、如何调试 IE 浏览器

高版本的IE（7以上）存在开发者工具，可以直接使用调试。
可以安装虚拟机再安装不同版本的IE去调试
在CSS中使用border: 1px solid red;和outline:1px solid red;显示盒模型调试
用IETest调试，模拟不同版本的IE浏览器

2、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？

CSS hack：由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS hack一般有3种表现形式CSS内部hack、选择器hack、及HTML头部引用（if IE）hack。
CSS内部hack:主要针对内部hack；比如IE6能识别下划线“”和“”，IE7能识别“”但不能识别下划线，而Firefox两个都不认识。background:#ff0; /* for all browsers /_background:#f00; / for ie6/background:#f0f; /* for ie6~7 /background:#00f\9; / for ie6~10 */

选择器hack：比如IE6能识别HTML.class{}，IE7能识别+HTML.class{}或者.first-child+html.class{}。等等html .class{}/* for IE6 /+html .class{}/* for IE7 /:first-child+html .class{}/* for IE7 */

HTML头部引用：针对所有IE：这类hack不仅仅对CSS有效还对判断句里的所有代码都生效。

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

display:inline-block；
对块级元素设置这个属性的时候，IE67是不支持的，需要如下语句:
*display:inline;
*zoom:1;

opacity:0.8;常用CSS3属性调节透明度，这个不被IE8以下支持。所以需要：
filter: "alpha(opacity=60)"; /* IE 8 /
filter: alpha(opacity=60); / IE 4-7 */
zoom: 1;

在IE7以下不兼容，需要给其固定宽度。

Box-sizing在IE67不支持。

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

一般来讲，如果有超过一定百分比的人数使用某个浏览器，我们在设计页面时候就要考虑到此浏览器的兼容问题。主要就是IE678，火狐和谷歌浏览器。先尽量写代码，如果月到一些问题可以用审查工具去看具体哪有问题，配合CANIUSE的网站查询兼容情况，再酌情进行修改。

渐进增强：是指在渲染的时候先以低版本的基础页面为主，保证基本功能，之后再针对高版本浏览器中的功能属性渲染，改进等。

优雅降级：与上者刚好相反，是指直接渲染网站所有功能，再对低版本的浏览器进行兼容。

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

reset.css:是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
normalize.css:它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。
nomalize.css的优势：

1. Normalize.css 保护了有价值的默认值
   Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
2. Normalize.css 修复了浏览器的bug
   它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.css 不会让你的调试工具变的杂乱
   使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
   这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
5. Normalize.css 拥有详细的文档
   Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

6、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用？

IE盒模型的宽度是：
宽度（width）=边框（border）+内边距（padding）+内容宽度（content）
标准盒模型的宽度是：实际内容的宽度。
IE678下使用标准盒模型在文档声明里写上即可。
这是一个CSS3属性的作用是固定盒模型的宽度，使得padding无法将盒模型撑开，也是就使用IE盒模型。