-
让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写法
- _ IE6
-
-
IE6/7
-
- !important IE7/Firefox
- *+ IE7
- 9 IE6/7/8
- IE8
- 条件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以上才支持