浏览器兼容

一、如何调试 IE 浏览器？

1.IE7以上版本可以按F12直接打开开发者调试工具进行调试。
2.安装虚拟机。
3.利用设置元素border: 1px solid red; outline: 1px solid red；进行调试。

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

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

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

CSS属性前缀法(即类内部Hack)：例如IE6能识别下划线"_____"和星号"*****"；IE7能识别星号"***"，但是不能识别下划线"_____"。
选择器前缀法(即选择器Hack)：例如IE6能识别选择器html.css{}，IE7能识别+html.css{}或者:first-child+html.css{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE（注：IE10+已经不在支持条件注释）；针对IE6及一下版本，这类hack不仅对CSS生效，对写在判断语句里的所有代码都会生效。

3.hack方式：

IE6
CSS属性前缀法：

IE6属性前缀法
选择器前缀法：

IE6选择器前缀法
IE条件注释法：

IE6条件注释法
IE7
CSS属性前缀法：

IE7属性前缀法
选择器前缀法：

IE7选择器前缀法
IE条件注释法：

IE7条件注释法

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

1.同一元素在不同浏览器的margin和padding值不同。
解决办法：可以在css开头设置通配符*{margin:0;padding:0}。
2.display:inline-block在IE8以上才支持该属性。
3.伪类link、hover、active和visited使用在非a标签元素上，IE8以下不支持。
4.rgba和opacity设置透明度，IE8以上支持。
5.min-height/width在IE6和IE7上存在兼容性问题。

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

1.浏览器兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在前端开发中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。
但是我们在实际开发中也要考虑到浏览器版本的使用情况，如果说开发某个项目的使用群体偏向年轻化、紧跟潮流化，而且如果低版本的浏览器使用者不多（有数据支持），那么在实际开发中可以放弃对一些低版本浏览器的兼容。从而减少工作量，提高工作效率。
2.渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能。然后在针对高级浏览器进行效果、交互等改进和追加功能来达到最好的用户体验。
优雅降级：一开始就针对高版本浏览器进行构建，然后在针对低版本浏览器进行兼容。

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

1.reset.css:
在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
2.normalize.css:
normalize,css的理念是尽量保存浏览器的默认样式，而不进行太多的重置，但它所提供的默认样式让各个浏览器保持了高度的一致，相对于传统的reset.css，它是一种新型的，为html5准备的优质替代方案。
3.nomalize.css的优势：

保护了有价值的默认值，
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，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中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

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

1.IE盒模型：IE 盒子模型的范围包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding；

IE盒模型

IE盒模型的宽包括：content,padding,border,margin;

2.标准盒模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分；

标准盒模型

W3C盒模型的宽包括：content,padding,border,margin;

3.避免触发IE盒模型的方法是使用声明，告诉IE采用W3C盒子模型即可。
4.box-sizing：border-box告诉浏览器按IE盒模型来渲染，盒模型的宽度width=border + padding + content宽度。