浏览器兼容

1.如何调试 IE 浏览器.
在ie9上按放12出现的调试者工具里可以选择直接调试IE9、IE8、IE7（若是IE6则需要重新再下载一个Virtural IE6）

Paste_Image.png

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

• 属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

Paste_Image.png

• 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。

Paste_Image.png

• IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

Paste_Image.png

3.列举几种 浏览器兼容问题
display:inline-block；
对块级元素设置这个属性的时候，IE67是不支持的，需要如下语句:

Paste_Image.png

4.针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？reset.css和normalize.css
分别是做什么的？为什么推荐使用 nomalize.css?
答：一般来讲，如果有超过一定百分比的人数使用某个浏览器，我们在设计页面时候就要考虑到此浏览器的兼容问题。主要就是IE678，火狐和谷歌浏览器。先尽量写代码，如果月到一些问题可以用审查工具去看具体哪有问题，配合CANIUSE的网站查询兼容情况，再酌情进行修改。

• 渐进增强：是指在渲染的时候先以低版本的基础页面为主，保证基本功能，之后再针对高版本浏览器中的功能属性渲染，改进等。
• 优雅降级：与上者刚好相反，是指直接渲染网站所有功能，再对低版本的浏览器进行兼容。
  5.reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
• 什么是CSS Reset。HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性?问题，影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉。
• 不同的浏览器在对于CSS没有定义的一些样式属性是不一样的，比如没有在自己的[CSS]里面规定超链接有没有下划线的时候，有些浏览器有，有些浏览器没有；再比如有一些浏览器规定的超链接默认颜色是蓝色，有一些又是黑色。而这个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中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

3.Normalize.css 是模块化的这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
4.Normalize.css 拥有详细的文档Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box
有什么作用。
IE盒模型内容width=border+padding；标准盒模型width=内容区宽度。
设置DOCTYPE，即可使 IE6 7 8 使用标准盒模型。
box-sizing：border-box按IE盒模型来渲染，宽度width=border + padding + content宽度。