浏览器兼容

如何调试 IE 浏览器

F12调出开发者工具进行调试：

开发者工具

高版本浏览器可以模拟低版本浏览器：

浏览器模拟

但是对于更低版本的IE6和IE7因为不存在开发者工具，建议通过搭建虚拟器进行调试：

通过模拟器对IE进行调试

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

由于不同厂商的浏览器，比如IE，Safari，Chrome等，或是同一浏览器的不同版本，对CSS的解析不同，因此会导致生成的页面效果不同，得不到想要的页面效果，这个时候就要针对不同的浏览器去写不同的CSS，让它同时兼容不同浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单说CSS hack目的就是使CSS代码兼容不同的浏览器。
CSS和HTML中写hack：
CSS hack大致有三种变现形式：CSS属性前缀法，选择器前缀法，以及IE条件注释法。

属性前缀法
如，针对IE6的前缀hack：

.main { 
   _color: black; 
   -color: black; 
}

针对IE7及以下的前缀hack：

.main { 
  !color: black; 
  $color: black; 
  &color: black;
  *color: black; 
   )color: black; 
  =color: black; 
  %color: black; 
  +color: black; 
  @color: black; 
  ,color: black; 
  .color: black; 
  /color: black; 
  `color: black; 
  ]color: black; 
   #color: black; 
  ~color: black; 
   ?color: black; 
  :color: black; 
  |color: black; 
}

针对IE6~8的前缀hack：

.main{ 
  color: black\9; 
  color/*\**/: black\9; 
}

选择器前缀法：

* html .selector {}/*针对IE6*/
*+html .selector {}/*针对IE7*/

3.IE条件注释法：
利用低版本IE无法识别注释的特性进行hack：

<!--[if IE 6]>
this is IE 6
<![end if]-->
<!--[if IE 7]>
this is IE 7
<![end if]-->
<!--[if IE 8]>
this is IE 8<br/>
<![end if]-->
<!--[if IE 9]>
this is IE 9<br/>
<![end if]-->
<!--[if !IE]-->
this is a good browser;
<!--<![end if]-->

参考：Browserhacks

列举几种浏览器兼容问题

display:inline-block的兼容问题

.selector{
  display:inline-block;
  *display:inline;
  *zoom:1;
}

min-height兼容问题：

.selector{
    min-height:100px;
    height:auto !important;
    height:100px;
}

透明度兼容问题：

.selector{  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
}

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

要对使用人群进行调研，如果一个浏览器的使用人群低于5%则可以忽略该浏览器，因为要在所有浏览器实现同一效果是不现实的，并且针对一些低版本浏览器本身也存在一些无法解决的兼容bug，对于需要过多投入而无法得到相应回报的事情应该放弃。
逐渐增强：对低版本浏览器进行设计，保证功能，然后在针对高浏览器进行效果等改进。
优雅降级：直接对高版本浏览器进行完整功能设计，然后再进行低版本兼容。

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

reset.css是样式重置，以暴力方式覆盖掉浏览器的所有默认样式，以保持浏览器渲染的一致性。
normalize.css则是一冲reset.css的代替方案，注重荣泳方案，重置掉该重置的样式，保留有用的user agent样式，同时进行一些bug修复。
normalize.css的优点：

保护有用的浏览器默认样式，而不是完全去掉他们；

一般化的样式：为大部分HTML元素提供；
修复浏览器自身的bug，并保证个浏览器的一致性；
优化CSS可用性；
解释代码：用注释和详细的文档。

参考：来，让我们谈一谈Normalize

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

IE盒模型：宽度=边框+padding+内容宽度：

IE盒模型

标准盒模型：宽度= 内容宽度：

标准盒模型

添加<!DOCTYPE html>可以让IE678使用标准盒模型。
box-sizing:border-box是CSS3新增属性，设置之后相当于以IE6模式解析盒模型

`box-sizing:border-box`

IE6,7,8下的盒模型，display:inline-block,max-width

盒模型：

IE678盒模型

改变 padding和border之后的盒模型：

IE678盒模型
display:inline-block:
在IE8中，支持display:inline-block

IE8

在不添加<!DOCTYPE html>声明时，则不支持display:inline-block:

ie8怪异模式

在IE7中，块级元素不支持display:inline-block,行内元素支持：

ie7

IE6和IE7相同：

IE6
max-width：
IE8支持max-width属性：

IE8

IE8在怪异模式下不支持：

IE8怪异模式

IE7支持max-width属性：

IE7

在怪异模式下，IE7同样不支持该属性：

IE7怪异模式

IE6完全不支持该属性：

IE6