浏览器兼容

1、如何调试IE？

• 首先，我们得知道IE的版本号：通过左上角工具（或帮助）中，点击关于Internet Explorer来查询。

IE11 IE6

• IE7及其以上都有控制台，打开方式和其他浏览器一样（F12）调试方式也基本相同。值得注意的是，IE浏览器存在仿真模式去模拟低版本IE的页面情况。

仿真调试

• 尽管IE控制台的仿真模式能够在一定程度上反应低版本IE的样式，但毕竟模拟和现实还是会有差距，所以最保险的方式是安装虚拟机，在虚拟机上安装各个版本的IE浏览器，亲自实践。

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

CSS hack：通俗的说就是利用BUG去调试BUG的手段。浏览器对于HTML和CSS的解析方式不同，造成了某种特定的写法只有在几个或者是单个浏览器中才能识别，这样我们就可以利用这种写法来解决CSS样式在浏览器中的兼容问题。

常见的hack的书写一般存在3种方式：

• 选择器前缀法

*html {}   //*前缀只对IE6生效
*+html {} //*+前缀只对IE7生效

• 类内属性前缀法

.container{ _color: red;/*IE6识别*/
                  *color: red;/*IE6,IE7识别*/ 
                   color: red\9;/*IE6-IE10识别*/
                   color: red\0;/*IE8-IE10识别*/
                   color: red\9\0;/*IE9,IE10识别*/ }

• 条件注释法

    <!--[if IE]>
    这段文字只在IE浏览器显示
    <![endif]-->

    <!--[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]-->
    
    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->

    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->
    
    <!--[if !IE]>
    这段文字只在非IE浏览器显示
    <![endif]-->

这些注释只有IE11以下的浏览器才会不将其当做注释，其它的浏览器会将其自动忽略。
对于hack的学习讲究浅尝则止，无需花深功夫去研究（太多，太杂），知道解决问题的思路（控制台调试），以及google即可。

reference:史上最全的CSS hack

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

• inline-block:IE8及其以上全部支持，IE6、7只支持inline->inline-block;
• opacity: IE8及其以下不支持，用filter:alpha(opacity=50)代替；
• 伪类选择器在低版本的IE中实现效果很差......;
• CSS3的新增功能基本上都不兼容。

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

网页制作的目的是满足客户的需求，如果针对政府、企业内部、银行、事业单位等这种只在特定工作场合、特定浏览器、只追求稳定的客户的话，那仅仅只需要进行针对性的网页开发，不需要满足或者微量满足兼容性即可。
但是互联网公司的用户来自五湖四海，每个人的浏览器都可能不尽相同，此时我们就需要进行市场分析，维护好主流浏览器的开发，保证小众浏览器的功能实现，适当放弃微量的个性化差异，以此节约开发周期和维护成本。
上述的两种模式其实就是所谓的渐进增强与优雅降级的思维模式。

• 渐进增强讲究的是：从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
• 优雅降级讲究的是：从复杂的现状开始，并试图减少用户体验的供给。

两种思路无好坏对错，选择与否还是根据用户需求。

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

由于上古时代，W3标准并未有现在如此的权威性，早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。为了解决这个问题，reset.css诞生了，它暴力的把html标签的许多默认样式全部归零，人们基于reset.css的基础上再根据自我需求自定义各标签样式。
随着时间的推移，现代浏览器对于标准的把控趋于统一，并且人们认为将HTML的默认样式一棒子打死的行为纯属于脱裤子放屁--多此一举，于是在reset.css的基础上，nomalize.css保留了大量的HTML默认样式，并且做了许多浏览器兼容上的努力，做到了取其精华，去其糟粕的思路。
nomalize.css的优势如下：
<blockquote>

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
   中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

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

4. Normalize.css 拥有详细的文档
   Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。
   </blockquote>
   参考：
   关于CSS Reset 那些事（一）之 历史演变与Normalize.css
   Normalize.css 和 Reset CSS 有什么本质区别没？
   normalize.css

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

IE盒模型：width/height=content+padding+border;
标准盒模型：width/height=content;

盒模型对比

在IE6/7/8浏览器下，声明DOCTYPE即可变为标准盒模型。

box-sizing是CSS3的新属性，其值有如下三种：

box-sizing

content-box是标准盒模型，border-box就是IE盒模型。

补充：flex手册