浏览器兼容性

一，如何调试 IE 浏览器

答：
1.使用高版本IE控制台；
2.border: 1px solid red(特别针对于IE6)，或者outline: 1px solid red(效果比border好,没有副作用)；
3.IE test 等常用IE测试软件；
4.虚拟机，直接在IE对应的版本打开测试；
5.javascript(在IE里面执行JS，在JS里面写样式进行调试)；
6.http://fts.aliyun.com/ （阿里云前端浏览器测试）

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

答：
1.为了获得统一的页面效果，针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。
2.三种hack写法：1）css属性前缀法 2）选择器前缀法 3）IE条件注释(即HTML头部引用if IE).

详解：
1.属性前缀法：
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
例如 IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_，IE6~IE10都认识\9，但firefox前述三个都不能认识.
例如：*background-color:black; /* IE6, IE7 */只对IE6 IE7有效。
2.选择器前缀法：
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
例如：
*html *前缀只对IE6生效 *+html *+前缀只对IE7生效
3.条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。
例如：

 只在IE下生效
只在IE6下生效
只在IE6以上版本生效
只在IE8上不生效
非IE浏览器生效

参考资料
史上最全的CSS hack方式一览
browserhacks

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

答：
1.inline-block在IE6和IE7不支持，解决方式 {display:inline; zoom:1}
2.opacity透明度在IE8以下不支持，解决方式filter:alpha(opacity=50)
3.IE8以下版本的浏览器不支持min-width和max-width属性；解决方法：直接写死。

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

答：
每个浏览器的兼容性（渲染标准）不同，不存在完美兼容的，应该根据项目的数据调研，根据市场和用户定位，决定兼容的程度。
多浏览器兼容覆盖的思路
1.根据调查数据决定是否兼容，如果是，则先看IE，
2.看看网页在IE是否出现问题
3.利用caniuse查看到底哪个属性没有兼容
4.通过搜索引擎查看解决该问题的方案
5.如果通过CSS无法解决问题,那么就用JS

渐进增强（progressive enhancement）针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行改进和完善以达到更好的用户体验。
优雅降级（graceful degradation）一开始就构建完整的功能，然后再针对低版本浏览器进行兼容（打补丁），确保低版本浏览器可用。

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

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

答：reset.css直接重置浏览器默认的样式，demo（*{ margin:0; padding:0; }）
normalize.css是一种CSS reset的改进方案，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

为什么推荐使用normalize.css
1.保护有用的浏览器默认样式而不是完全去掉它们一般化的样式：
2.为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性：
3.用一些小技巧解释代码：
4.Normalize.css 是模块化的，可以自定义设计。
5.有注释和详细的文档

如何使用 normalize.css
首先，安装或从Github下载Normalize.css，接下来有两种主要途径去使用它。
策略一：将normalize.css作为你自己项目的基础CSS，自定义样式值以满足设计师的需求。
策略二：引入normalize.css源码并在此基础上构建，在必要的时候用你自己写的CSS覆盖默认值。

相关阅读
Normalize.css

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

答：
1.ie678（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度;
2.ie678(添加doctype)则使用W3C标准盒模型， 宽度= 内容宽度;
3.IE678 添加doctype 使用标准盒模型
4.box-sizing:border-box是CSS3的新属性，作用是先固定盒子大小；然后任何padding和边框都在盒子内进行改变。通过从已设定的宽度和高度中分别减去边框和内边距才能得到内容的宽度和高度。