一、问答部分：

1. 如何调试 IE 浏览器?

• 如果是IE7版本以上可以使用自带的开发者工具，按F12，即可打开：

• 如果是IE6可以使用边框直接进行调试。
• 使用软件IEterser来进行不同的IE版本调试，但是模拟的效果有缺陷，不能保证网页运行在真正的IE浏览器上没有问题。
• 安装虚拟机分别运行IE不同的版本进行调试，推荐使用这个方便，稳定。

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

• CSS hack由于不同厂商的浏览器，比如Internet Explore,Safari,Mozila Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7。对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
  这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

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

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

  非IE浏览器生效

• 在CSS中，IE6，IE7的hack方式：
  IE6：
  <pre>属性前缀法：
  .item{
  _color:yellow;/for IE6/
  }
  </pre>
  <pre>选择器前缀法：
  *h1{
  color:yellow;/for IE6/
  }
  </pre>
  <pre>条件注释法：

</pre>

IE7:
<pre>属性前缀法：
.item{
*color:yellow;/for IE7/
}
</pre>

<pre>选择器前缀法：
*+body{
color:yellow;/for IE7*/
}
</pre>

<pre>条件注释法：

</pre>

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

• inline-block：对于IE6、IE7并不支持，解决方法是优雅降级，将display属性值在IE6、7下写为display: inline;
  inline元素的display属性设置为inline-block时，所有的浏览器都支持；block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的。
  方法一：
  <pre>*display: inline; /* 将块级元素设置为内联对象呈递。*/ *zoom: 1; /* 触发haslayout */</pre>

方法二：
先使用display: inline-block;属性触发块级元素，然后再定义display:inline;，让块元素呈递为内联对象。需要注意的是，两个display 要先后放在两个CSS声明中才有效果，顺序也不能反。
<pre>
div{
display: inline-block;
*display: inline;
}
</pre>

• opacity,IE8及以下版本是不支持opacity属性，可以使用filter:alpha(opacity=40)替代
  <pre>
  .opacity{
  filter: alpha(opacity=50);/* IE /
  -moz-opacity: 0.5;/ 老版Mozilla /
  -khtml-opacity: 0.5; / 老版Safari /
  opacity: 0.5; / 支持opacity的浏览器*/
  }
  </pre>

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

• 兼容问题：在开发网页的时候，由于各方面的原因，不可能做到所有的浏览器都兼容。所以在开发之前就要做一个统计，统计你的用户群体使用的是什么浏览器。假如某一款浏览器的使用比例超过了5%（这个数字不固定，每个项目的要求不一样），你就需要针对这款浏览器做兼容处理了。兼容并不是一定要分毫不差的在每个浏览器都很好的实现，对于一些老旧的浏览器，只要兼容到不是那么难看的程度就可以了，为了极少数的用户去花费极大的精力去兼容是不可取的。

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

• 优雅降级：一开始就针对高版本浏览器进行页面构建，然后再针对低版本浏览器进行兼容。

• 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给。而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

• 使用策略：也许有各种fallback方案可以保证完全兼容性各个浏览器，但依然不能保证低端浏览器的使用体验，最多是看起来各个浏览器都一样了。因此，现在的设计和开发的策略是浏览器分级支持。优先为高端浏览器设计，同时考虑低端浏览器的退化方案。甚至有些复杂的应用可以拒绝ie6，提示用户使用高端浏览器。

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

reset.css是重新定义标签样式，把浏览器的默认样式覆盖掉，让整个浏览器保持渲染的一致性。
normalize.css是reset.css的替代方案。它重置掉该重置的样式，保留有用的浏览器默认样式，同时进行一些bug的修复，它相对平和。

推荐使用nomalize.css的原因：

• Normalize.css 保护了有价值的默认值
  Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

• Normalize.css 修复了浏览器的bug
  它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

• Normalize.css 不会让你的调试工具变的杂乱
  使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

• Normalize.css 是模块化的
  这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

• Normalize.css 拥有详细的文档
  Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。
  这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

  参考：来，让我们谈一谈 Normalize.css
  知乎: Normalize.css 与传统的 CSS Reset 有哪些区别

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

• 区别：

W3C盒模型和IE盒模型尺寸图

W3C盒模型总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE盒模型总宽度=margin-left+width+margin-right
W3C盒模型总高度 = margin-top+ border-top + padding-top + height + padding-bottom+ border-bottom+ margin-bottom
IE盒模型总高度=margin-top+height+margin-bottom

• 怎样使IE678使用标准盒模型
  添加doctype声明，使IE678使用标准模式，就会使用标准盒模型。反之，如果不添加doctype声明，使IE678进入怪异模式，它就会使用IE盒模型。

• box-sizing:border-box的作用：
  box-sizing 是CSS3的属性，用来改变默认的 CSS 盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。
  content-box：默认值，标准盒模型。 width
  与 height
  只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
  尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
  border-box： width
  与 height
  包括内边距（padding）与边框（border），不包括外边距（margin）。这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候内边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px. 如果计算后的最内部的内容宽度为负值，都会被计算成0，内容还在，所以不可能通过border-box来隐藏元素。
  尺寸计算公式：width = border + padding + 内容的宽度，height = border + padding + 内容的高度。

二、操作部分：

1. Virtualbox安装XP虚拟机。

虚拟机

2. 在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别？

• 盒模型

代码

a. 不加<!doctype html>，在怪异模式下运行代码:

怪异模式下IE6，7，8盒模型.png

b.加<！doctype html>，在标准模式下运行:

标准模式下IE6，7，8的盒模型.jpg

• inline-block

代码

IE6,7中运行：

IE6,7中测试inline-block代码.png

IE8中运行：

在IE8中测试inline-block代码

• max-width

代码

IE6中运行：

IE6中测试max-width代码.png

IE7,8中运行

IE7,8下测试max-width代码.jpg