浏览器的渲染模式

标签：style   blog   http   io   color   ar   os   sp   strong   

浏览器渲染模式分为2种,一种是 怪癖模式[Quirksmode] 和 标准模式 [Standars mode]。

怪癖模式和标准模式有几点比较重要的区别：

1.声明上，当页面没有！doctype声明或者！doctype声明中没有HTML4以上（包含HTML4）的DTD声明，则页面以quirks mode渲染，其他情况则以sdandars mode渲染。

2.怪癖模式和标准模式在盒模型上有很大的区别

     怪癖模式：

                   盒模型的宽度=margin-left  + width  + margin-right

                   盒模型的高度=margin-top  +  width  +  margin-bottom

         获页面宽度和高度的js代码：

cWidth=document.body.scrollWidth;
cHeight=document.body.scrollHeight;

     标准模式：

                   盒模型的宽度=margin-left  +  border-left  +  padding-left  +  width +  padding-right  +  border-right  +  margin-right

                   盒模型的高度请自行脑补。。

         获取页面宽度和高度的js代码：

cWidth=document.documentElement.scrollWidth;
cHeight=document.documentElement.scrollHeight;

3.用js检测浏览器的渲染模式的方式：

alert(document.compatMode );

输出有两个可能值：  BackCompat  --怪癖模式

                           CSS1Compat --标准模式

附：获取浏览器高度和宽度js代码

function getBrowerSize(){
        var cWidth,cHeight;
        if(document.compatMode=="BackCompat"){
                  cWidth=document.body.scrollWidth;
                  cHeight=document.body.scrollHeight;
        }
        else{
                  cWidth=document.documentElement.scrollWidth;
                  cHeight=document.documentElement.scrollHeight;
        }
        return {"width="+cWidth+"px","height="+cHeight+"px"};
}

浏览器的渲染模式

标签：style   blog   http   io   color   ar   os   sp   strong   

原文地址：http://www.cnblogs.com/vitaminE/p/4083071.html