IE8兼容解决方案

以上只是简单的举例，详细内容建议参考：XHTML编写标准！

在开始之前，介绍一下浏览器的三种模式，HTML4提供了三种DOCTYPE可选择：

⏹过渡型（Transitional ）

要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

⏹严格型（Strict ）

要求严格的DTD，你不能使用任何表现层的标识和属性，例如
。

⏹框架型（Frameset ）

专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

W3C推出标准以后，浏览器出现两种模式渲染界面：Quirks mode(或者称为Compatibility Mode)和Strict mode(或者称为Standars mode)：

检测浏览器使用哪种模式的方法：

标准模式(CSS1Compat)：严禁的模式，兼容符合W3C标准的页面。

* 建议设计页面时按照XHTML标准编写！

二、浏览器检测

1.检测浏览器是否为IE浏览器

a.使用document.all检测：

If(document.all){//IE}

Else{//非IE}

* 只有IE支持这个对象，但是FF有可能在以后也会支持这个对象，所以建议使用下面方法检测!

b.使用!!window.ActiveXObject检测(注意前面的两个叹号)：

If(!!window.ActiveXObject){//IE}

Else{//非IE}

2.检测IE浏览器版本

var isIE = !!window.ActiveXObject;   

         var isIE6 = isIE && !window.XMLHttpRequest;   

    var isIE8 = isIE && !!document.documentMode;

3.IE7-IE8的兼容模式：

在html的head中添加以下标签，选择实现与 Internet Explorer 7  的最高级别的兼容性：

    有些极端的问题，我们可能需要使用兼容模式暂时解决。

三、脚本

1.document.body和document.documentElement

document.documentElement: 可返回存在于 XML 以及 HTML 文档中的文档根节点;

document.body: 对 HTML 页面的特殊扩展，提供了对  标签的直接访问;

在xhtml标准网页或者更简单的说是带标签的页面，使用document.body对象获取到的值为0,比如document.body.scrollTop；所以在xhtml标准页面和带有此标签的页面中，我们需要使用document.documentElement，如下：

var top=document.documentElement.scrollTop || document.body.scrollTop;

这么写可以得到很好的兼容性。

在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例:

var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 

下面总结一下平时常用的：

网页可见区域宽： document.body.clientWidth; 

网页可见区域高： document.body.clientHeight; 

网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 

网页可见区域高： document.body.offsetHeight  (包括边线的宽); 

网页正文全文宽： document.body.scrollWidth; 

网页正文全文高： document.body.scrollHeight; 

网页被卷去的高： document.body.scrollTop; 

网页被卷去的左： document.body.scrollLeft; 

网页正文部分上： window.screenTop; 

网页正文部分左： window.screenLeft; 

屏幕分辨率的高： window.screen.height; 

屏幕分辨率的宽： window.screen.width; 

屏幕可用工作区高度： window.screen.availHeight; 

屏幕可用工作区宽度：window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。  

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 

scrollWidth:获取对象的滚动宽度 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  

event.clientX 相对文档的水平座标 

event.clientY 相对文档的垂直座标 

event.offsetX 相对容器的水平坐标 

event.offsetY 相对容器的垂直坐标  

document.documentElement.scrollTop 垂直方向滚动的值 

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

[此图摘自网上]

2.setCapture和captureEvents

都是检测鼠标事件的，其中ie支持前者，火狐支持或者；

四、样式

1.盒子的渲染

IE的不同版本最大不同在于对BOX的解析上，下面就涉及到得问题作简单介绍：

浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。

下面图解IE下盒子和标准盒子区别，了解后可以解决父级被撑破或者其他奇怪问题：

可以明显发现，元素的width和height与标准表示的不同。

2.定位

a.居中问题

✧css中display:block的元素，如果不设置高度，该盒子高度将自动适应其包含的内容，加上留白等(除非使用了float);

✧b. 如果不设置宽度，一个非float型盒子水平上将充满其父容器(扣除父容器的留白);

✧c. 如果一个盒子的宽度设置为100%，它就不能再设置margin,padding和border，否则会撑破其容器；

✧d. 垂直毗邻的margin会引起复杂的坍塌问题，导致布局问题(比如两个垂直毗邻的block对象，上面对象的bottom-margin为40，下面的对象top-margin为20，则两个对象的间距将是40而不是60)；

✧e. block级对象会自然的水平充满其父容器，因此没有必要为止设置100%宽度属性；非绝对位置和非float属性的元素，起始摆放位置是其父容器的左上边界。

✧f. Inline级对象会忽略其宽度和高度设置，并受排版属性的影响(如white-space,font-size,letter-spacing等);

✧g. inline级对象可以使用vertical-align属性控制其垂直对象，但是block级对象不可以；另外inline级对象的下方会保留一些自然的空间，以适应字母g一类向下探出的笔画；一个设置为float的inline对象将变成block对象。

✧h. 一个float对象，将在其置身的block级非float内容中跳出，换句话，如果将一个box向左侧float,它后面的非float block对象会显示在下方，Inline级内容会在旁边包围；如果想让一段内容包围一个float对象，这段内容必须要么是Inline级的，要么是设置为相同方向的float;

✧i. 一个float对象，如果不设置宽度，会自动缩成包含内容的宽度，所以建议为float对象明确设置高度；

✧j. ie6中不可以乱用float，否则会带来内容消失以及文字重复等稀奇古怪的问题；在float方向的那边，会出现双倍margin，将display设置为Inline会解决这个问题；

4.其他样式

✧页面高度

1.IE8下的VML问题

可以使用兼容模式在界面上显示vml，或者遵守以下的方式：

✧不要使用全局选择符*对VML元素添加样式,例如： 

             v\\:*{behavior:url(#default#VML)} 

　　需要修改为： 

             v\\:element{b ehavior:url(#default#VML)} 

    *element为你使用了的VML元素，需要对页面中使用的每一种标签单独设置

✧不要使用setAttribute为VML对象添加属性。 

        rect.setAttribute("fillcolor", "black")

建议修改为：

rect.fillcolor = "black";

✧为VML元素样式的非0属性添加单位。

必须修改为：

2.display属性

ie6不支持min-height,min-width,max-width,max-height一类的属性，ie6不支持很多display属性值，如inline-table,inline-cell,inline-row;ie6中只有a这个对象才可以使用:hover这个伪类；ie6--ie8对css3的支持很有限；

六、综合