这是什么

• 让ie6 7 8兼容html5新标签

• 方法一

等同于：
document.createElement("header");
document.createElement("footer");
然后两种方法都需要设置css样式：
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
不能放在window.onload = function(){}或者$(function(){})里面。

• 方法二，使用Google的html5shiv包（推荐）

这种方法不需要设置css 不需要把header,footer等设置为display:block;

• 让ie 6 7 8兼容css3新属性

方法1：css3pie的css3 PIE.htc
支持：border-radius圆角 、 box-shadow 盒阴影 、 gradient渐变 、 multiple background images多背景 。
存在的问题

• 1.z-index问题
  这些css3效果是借助VML，由VML绘制一个圆角或者投影效果的容器元素，然后这个容器元素作为目标元素的后兄弟节点插入，如果目标元素position:absolute 或是 position:relative，则这个css3-container元素将会设置与之一样的z-index值，在DOM tree中，同级的元素总是后面的覆盖前面的，所以这样就实现了覆盖，又避免了可能有其他元素正好插入其中。
  所以，问题来了，如果目前元素的position属性为static，也就是默认属性，则z-index属性是没有用的，无覆盖可言，所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单，设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值（不可为-1）。
• 路径问题
  pie.htc是相对于html文档的，不是相对于css文档。
• 缩写问题
  只支持缩写，像border-top-left-radius不能表示左上圆角
• 提供正确的content-Type
  要想让IE浏览器支持htc文件，需要一个有着"text/x-component" 字样的content-type 头部，否则，会忽视behavior。绝大数web服务器提供了正确的content-type，但是还有一部分则有问题.

• 浏览器差异

1.ul ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效，padding属性对FireFox有效。
[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

2.字体大小不同

对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。 
解决方法：使用指定的字体大小如14px。 
并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。

ie6双边距bug

div设置float浮动，又设置margin后，会有双倍margin
解决方案：设置display:inline/inline-block;

• :after/::after与:before/::before

:after=::after :before=::before
:after :before兼容到ie8（ie8可以兼容），::after与::before兼容到ie9

• !important兼容到ie7及以上

• *div兼容到ie6，且只有ie浏览器认识，其他浏览器不兼容

• width height这种反斜杠写法在ie5及以下不支持，其他浏览器都支持

• transform兼容到ie9+

• box-sizing:boder-box/content-box;Moz下还支持padding-box
  兼容到ie8

• 获取一个div的height
  通过元素的clientHeight属性能够得到元素的高度,如：  
  var height = element.clientHeight;  
    
  这种做法的局限：  
  1. 如果元素的display属性设置为none, 那么得到的结果为0  
  2. 在safari浏览器中，需要使用：element.offsetHeight得到实际高度，这是safari浏览器的bug

• querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

• 解决ie6-7下浮动后
  不要在浮动的元素用margin， 在其父级元素用padding

• 3、浏览器兼容问题
  （1）所有浏览器都支持margin/padding属性
  （2）任何版本IE都不支持属性值“inherit”

• css hack写法

  1. _ IE6

  2. •      IE6/7
       

  3. !important IE7/Firefox
  4. *+ IE7
  5. 9 IE6/7/8
  6. IE8
  7. 条件hack IE7以下版本 IE7 IE8 IE8以上

border:2pxsolid#00f;/Firefox的属性/  
border:2pxsolid#0909;/IE6/7/8的属性/  
border:2pxsolid#F90;/IE8支持/  
_border:2pxsolid#f00;/IE6的属性/

• calc()在ie9以上才支持