一、如何调试 IE 浏览器？

1.IE7版本以上可以按F12调出开发者工具进行调试。
2.IE6版本可以使用border: 1px solid red;直接进行调试。
3.outline: 1px solid red;（ie6不支持）（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
4.安装虚拟机，运行不同版本的IE来调试。

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

1.定义：CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。就需要针对不同的浏览器或不同版本写特定的CSS样式，把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。
2.目的：CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
3.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生效，对写在判断语句里面的所有代码都会生效。browserhacks
ie6、ie7的 hack 方式：
(1)条件注释法
只在IE6下生效
```
只在IE7下生效
```

(2)类内属性前缀法
例如可以browserhacks查询ie6，ie7对应的属性前缀法。如ie6支持"-" "_" "\9"等，ie7支持"\9" "!" "%" "|" "@"等等。
.hack{
/demo1 /
/demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景/
background-color:red; /* All browsers /
background-color:blue !important;/ All browsers but IE6 /
background-color:black; / IE6, IE7 /
+background-color:yellow;/ IE6, IE7/
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 /
background-color:purple\0; / IE8, IE9, IE10 /
background-color:orange\9\0;/IE9, IE10/
_background-color:green; / Only works in IE6 */
+background- color:pink; / WARNING: Only works in IE7 ? Is it right? */
}

(3)选择器前缀法1

*html  *前缀只对IE6生效
*+html  *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), 
(-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

例如：ie7

ie7

ie7应用

ie 6

ie6

ie6应用

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

1.Firefox

@-moz-document url-prefix() { 
 .selector { property: value; }
   }
  /* 支持所有firefox版本 */ #selector[id=selector] { property: value; } 或者：
@-moz-document url-prefix() { .selector { property: value; } }
/* 支持所有Gecko内核的浏览器 (包括Firefox) */ *>.selector { property: value; }

以上为支持Firefox的写法。
2.chrome and safari

@media screen and (-webkit-min-device-pixel-ratio:0) { 
       Selector { property: value; }
     }
@media screen and (-webkit-min-device-pixel-ratio:0) { 
     .demo { color: #f36; } 
     }

3.IE9浏览器

 :root Selector {property: value\9;}
   例如：
 :root .demo {color: #ff0\9;}

4.ie7浏览器

   *+html Selector{property:value;} 或
  *:first-child+html Selector {property:value;} 
  例如：
  *+html .demo {background: green;} 或者：     
  *:first-child+html .demo {background: green;}

5.ie6浏览器等等。

  Selector {_property/**/:/**/value;}           
   或者：                   
  Selector {_property: value;}      
   或者：          
  *html Selector {property: value;}
   例如：
  .demo {_width/**/:/**/100px;}     
   或者：          
  .demo {_width: 100px;}            
   或者：          
  *html .demo {width: 100px;}

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

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，可能会导致浏览器对网页内容解读错误，出现乱码、变形、信息错乱等现象，影响页面的美观和使用。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。写出的代码要做到易于后期维护，考虑兼容性万不得已的情况下再采取hack的方式，因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求，或者说违背了浏览器的某些规则而先造成的，所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果，除非到了万不得已情况下，才考虑CSS的Hack。
　渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
　优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而优雅降级则意味着朝前看，同时保证其根基处于安全地带。

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

reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置。
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

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

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

IE盒模型内容width=border+padding；标准盒模型width=内容区宽度。
设置DOCTYPE，即可使 IE6 7 8 使用标准盒模型。
box-sizing：border-box按IE盒模型来渲染，宽度width=border + padding + content宽度。

七、virtualbox 安装 xp 虚拟机。

win10操作系统更新不知道怎么回事，virtualbox从老版本到新版本都试安装了一遍，virtualbox 点击还是打不开。最后使用老电脑安装了个xp的。

QQ截图201608161708141.png

QQ截图20160816170846.png

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

经测试在IE678中盒模型无差异，inline-block：IE67中不支持，IE8支持。
max-width：IE6不支持，IE78支持。

本文版权归本人及饥人谷所有，转载请注明出处，谢谢！

浏览器兼容