Copy Code code as follows:
var Rgb2hex = function (RGB) {
RGB = Rgb.match (/^rgb\ (\d+), \s* (\d+), \s* (\d+) \) $/);
Return "#" +tohex (Rgb[1]) +tohex (rgb[2]) +tohex (rgb[3))
}
var Tohex = function (x) {
var hexdigits = [' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F ';
return isNaN (x)? ': hexdigits[(x-x%) + hexdigits[x + 16];
}
We use the regular expression to detect whether it is RGB format, is to use Rgb2hex to convert it. But if it is red,green equivalent, Firefox is uncharacteristically, converted to hex format, but IE remains the same. We have no way to make a hash of ourselves, to get the usual colors in, and then one pair is.
Copy Code code as follows:
if (Style.search (/background|color/)!=-1) {
var color = {
Aqua: ' #0ff ',
Black: ' #000 ',
Blue: ' #00f ',
Gray: ' #808080 ',
Purple: ' #800080 ',
Fuchsia: ' #f0f ',
Green: ' #008000 ',
Lime: ' #0f0 ',
Maroon: ' #800000 ',
Navy: ' #000080 ',
Olive: ' #808000 ',
Orange: ' #ffa500 ',
Red: ' #f00 ',
Silver: ' #c0c0c0 ',
Teal: ' #008080 ',
Transparent: ' Rgba (0,0,0,0) ',
White: ' #fff ',
Yellow: ' #ff0 '
}
if (!! Color[value]) {
Value = Color[value]
}
if (value = = "Inherit") {
Return GetStyle (El.parentnode,style);
}
if (/^rgb\ (\d+), \s* (\d+), \s* (\d+) \) $/.test (value)) {
return Rgb2hex (value)
}else if (/^#/.test (value)) {
Value = Value.replace (' # ', ');
Return "#" + (Value.length = 3 Value.replace (/^ (\w) (\w) (\w) $/, ' $1$1$2$2$3$3 '): value);
}
return value;
}
This is basically the exact value of the CSS, and obviously there are a lot of deficiencies, but for layout and commonly used styles are implemented. It also provides a constant q that determines the page rendering mode, for convenience, the method name and jquery have the same name (only values, cannot be assigned, and later have time to integrate with my addsheet function).
Copy Code code as follows:
(function () {
var Isquirk = (document.documentmode)? (document.documentmode==5)? True:false: ((document.compatmode== "Css1compat")? false:true);
var iselement = function (EL) {
Return!! (el && el.nodetype = 1);
}
var propcache = [];
var propfloat =!+ "\v1"? ' stylefloat ': ' Cssfloat ';
var camelize = function (attr) {
Return Attr.replace (/\-(\w)/g, function (all, letter) {
return Letter.touppercase ();
});
}
var memorize = function (prop) {//meaning: Check out form cache
return Propcache[prop] | | (Propcache[prop] = prop = = ' float ' propfloat:camelize (prop));
}
var getieopacity = function (EL) {
var filter;
if (!! Window. Xdomainrequest) {
Filter = El.style.filter.match (/progid:dximagetransform.microsoft.alpha\ (.?) Opacity= (. *). \)/i);
}else{
Filter = El.style.filter.match (/alpha\ (opacity= (. *) \)/i);
}
if (filter) {
var value = parsefloat (filter[1]);
if (!isnan (value)) {
return value? value/100:0;
}
}
return 1;
}
var convertpixelvalue = function (el, value) {
var style = El.style,left = Style.left,rsleft = El.runtimeStyle.left;
El.runtimeStyle.left = El.currentStyle.left;
Style.left = value | | 0;
var px = style.pixelleft;
Style.left = left;//Restore Data
El.runtimeStyle.left = rsleft;//Restore Data
return px + "px"
}
var Rgb2hex = function (RGB) {
RGB = Rgb.match (/^rgb\ (\d+), \s* (\d+), \s* (\d+) \) $/);
Return "#" +tohex (Rgb[1]) +tohex (rgb[2]) +tohex (rgb[3))
}
var Tohex = function (x) {
var hexdigits = [' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F ';
return isNaN (x)? ': hexdigits[(x-x%) + hexdigits[x + 16];
}
var getstyle = function (el, style) {
var value;
if (!+ "\v1") {
Opacity of special handling IE
if (style = = "opacity") {
Return Getieopacity (EL)
}
Value = El.currentstyle[memorize (style)];
Height and width of special handling ie
if (/^ (height|width) $/.test (style)) {
var values = (style = = ' width ')? [' Left ', ' right ']: [' top ', ' bottom '], size = 0;
if (Isquirk) {
Return El[camelize ("offset-" +style)] + "px"
}else{
var client = parsefloat (El[camelize ("client-" +style)]),
Paddinga = parsefloat (GetStyle (el, "padding-" + values[0)),
PADDINGB = parsefloat (GetStyle (el, "padding-" + values[1));
Return (CLIENT-PADDINGA-PADDINGB) + "px";
}
}
}else{
if (style = = "float") {
style = Propfloat;
}
Value = Document.defaultView.getComputedStyle (EL, null). GetPropertyValue (Style)
}
The following sections are all used to convert the imprecise values obtained above
if (!/^\d+px$/.test (value)) {
Convert measurable values
if (/(EM|PT|MM|CM|PC|IN|EX|REM|VW|VH|VM|CH|GR) $/.test (value)) {
Return Convertpixelvalue (El,value);
}
Conversion percent, excluding fonts
if (/%$/.test (value) && style!= "Font-size") {
Return parsefloat (GetStyle (El.parentnode, "width")) * parsefloat (value)/100 + "px"
}
Convert border thin medium thick
if (/^ (border). + (width) $/.test (style)) {
var s = style.replace ("width", "style"),
b = {
thin:["1px", "2px"],
medium:["3px", "4px"],
thick:["5px", "6px"]
};
if (value = = "Medium" && getstyle (el,s) = = "None") {
return "0px";
}
Return!! Window. Xdomainrequest? B[VALUE][0]: b[value][1];
}
Convert Margin Auto
if (/^ (margin). +/.test (style) && value = = "Auto") {
var father = El.parentnode;
if (/msie 6/.test (navigator.useragent) && GetStyle (father, "text-align") = = "Center") {
var fatherwidth = parsefloat (GetStyle (father, "width")),
_temp = GetStyle (father, "position");
Father.runtimeStyle.postion = "relative";
var offsetwidth = el.offsetwidth;
Father.runtimeStyle.postion = _temp;
Return (Fatherwidth-offsetwidth)/2 + "px";
}
return "0px";
}
Convert Top|left|right|bottom Auto
if (/(Top|left|right|bottom)/.test (style) && value = = "Auto") {
return El.getboundingclientrect () [style];
}
Convert color
if (Style.search (/background|color/)!=-1) {
var color = {
Aqua: ' #0ff ',
Black: ' #000 ',
Blue: ' #00f ',
Gray: ' #808080 ',
Purple: ' #800080 ',
Fuchsia: ' #f0f ',
Green: ' #008000 ',
Lime: ' #0f0 ',
Maroon: ' #800000 ',
Navy: ' #000080 ',
Olive: ' #808000 ',
Orange: ' #ffa500 ',
Red: ' #f00 ',
Silver: ' #c0c0c0 ',
Teal: ' #008080 ',
Transparent: ' Rgba (0,0,0,0) ',
White: ' #fff ',
Yellow: ' #ff0 '
}
if (!! Color[value]) {
Value = Color[value]
}
if (value = = "Inherit") {
Return GetStyle (El.parentnode,style);
}
if (/^rgb\ (\d+), \s* (\d+), \s* (\d+) \) $/.test (value)) {
return Rgb2hex (value)
}else if (/^#/.test (value)) {
Value = Value.replace (' # ', ');
Return "#" + (Value.length = 3 Value.replace (/^ (\w) (\w) (\w) $/, ' $1$1$2$2$3$3 '): value);
}
return value;
}
}
Return value;//such as 0px
}
var css = function () {
var a = arguments;
if (a.length = = 1) {
Return GetStyle (This,a[0])
}
}
var _ = function (EL) {
var el = iselement (EL)? El:d Ocument.getelementbyid (EL);
var gene =!el.constructor? El:el.constructor.prototype;
Gene.css = CSS;
Gene.width = function () {
Return GetStyle (This, "width");
};
Gene.height = function () {
Return GetStyle (This, "height");
};
Return El
}
if (!window._) {//To avoid conflict with jquery $, I use _ as the unique global variable of the class library
Window[' _ '] =_;
}
_.Q = Isquirk;
})()
Usage is as follows:
Copy Code code as follows:
Window.onload = function () {
Alert (_ ("CCC"). CSS ("Background-color")
Alert (_ ("AAA"). CSS ("width")
Alert (_ (document.body). Width ())
};
We can use this thing to study document.body and Document.documentelement.
Copy Code code as follows:
function text () {
var BODY = document.body,html = document.documentelement;
_ ("W1"). InnerHTML = _ (Body). width ();
_ ("W2"). InnerHTML = _ (HTML). width ();
_ ("H1"). InnerHTML = _ (body). Height ();
_ ("H2"). InnerHTML = _ (HTML). Height ();
_ ("Ml1"). InnerHTML = _ (Body). CSS ("Margin-left");
_ ("ML2"). InnerHTML = _ (HTML). CSS ("Margin-left");
_ ("MR1"). InnerHTML = _ (Body). CSS ("Margin-right");
_ ("MR2"). InnerHTML = _ (HTML). CSS ("Margin-right");
_ ("MT1"). InnerHTML = _ (Body). CSS ("Margin-top");
_ ("Mt2"). InnerHTML = _ (HTML). CSS ("Margin-top");
_ ("Mb1"). InnerHTML = _ (Body). CSS ("Margin-bottom");
_ ("MB2"). InnerHTML = _ (HTML). CSS ("Margin-bottom");
_ ("Pl1"). InnerHTML = _ (Body). CSS ("Padding-left");
_ ("Pl2"). InnerHTML = _ (HTML). CSS ("Padding-left");
_ ("Pr1"). InnerHTML = _ (Body). CSS ("Padding-right");
_ ("Pr2"). InnerHTML = _ (HTML). CSS ("Padding-right");
_ ("Bl1"). InnerHTML = _ (Body). CSS ("Border-left-width");
_ ("Bl2"). InnerHTML = _ (HTML). CSS ("Border-left-width");
_ ("BR1"). InnerHTML = _ (Body). CSS ("Border-right-width");
_ ("Br2"). InnerHTML = _ (HTML). CSS ("Border-right-width");
_ ("QQQ"). InnerHTML =!_.q? "Standard mode": "Eccentricity mode";
_ ("T1"). InnerHTML = _ (Body). CSS ("top");
_ ("T2"). InnerHTML = _ (HTML). CSS ("top");
_ ("L1"). InnerHTML = _ (Body). CSS ("left");
_ ("L2"). InnerHTML = _ (HTML). CSS ("left");
_ ("Ot1"). InnerHTML = Body.offsettop;
_ ("Ot2"). InnerHTML = Html.offsettop;
_ ("Ol1"). InnerHTML = Body.offsetleft;
_ ("Ol2"). InnerHTML = Html.offsetleft;
_ ("Ct1"). InnerHTML = Body.clienttop;
_ ("Ct2"). InnerHTML = Html.clienttop;
_ ("CL1"). InnerHTML = Body.clientleft;
_ ("Cl2"). InnerHTML = Html.clientleft;
_ ("Cw1"). InnerHTML = Body.clientwidth;
_ ("Cw2"). InnerHTML = Html.clientwidth;
_ ("Ow1"). InnerHTML = Body.offsetwidth;
_ ("Ow2"). InnerHTML = Html.offsetwidth;
_ ("SW1"). InnerHTML = Body.scrollwidth;
_ ("SW2"). InnerHTML = Html.scrollwidth;
}
<!doctype html> <html dir= "ltr" lang= "ZH-CN" id= "html" > <head> <meta charset= "Utf-8"/> <m ETA http-equiv= "x-ua-compatible" content= "ie=8" > <style type= "text/css" > HTML, body{border:0; } </style> <script type= "Text/javascript" > (function () {var Isquirk = (document.documentmode)? (document.documentmode==5)? True:false: ((document.compatmode== "Css1compat")? false:true); var iselement = function (EL) {return!! (el && el.nodetype = 1); } var propcache = []; var propfloat =!+ "\v1"? ' stylefloat ': ' Cssfloat '; var camelize = function (attr) {return attr.replace (/\-(\w)/g, function (all, letter) {return letter.touppercase (); }); var memorize = function (prop) {//meaning: Check out form cache return Propcache[prop] | | (Propcache[prop] = prop = = ' float ' propfloat:camelize (prop)); var getieopacity = function (EL) {var filter; if (!! Window. Xdomainrequest) {filter = El.style.filter.match (/progid:dximageTransform.microsoft.alpha\ (.? Opacity= (. *). \)/i); }else{filter = El.style.filter.match (/alpha\ (opacity= (. *) \)/i); } if (filter) {var value = parsefloat (filter[1]); if (!isnan (value)) {return value value/100:0; } return 1; var convertpixelvalue = function (el, value) {var style = El.style,left = Style.left,rsleft = El.runtimeStyle.left; El.runtimeStyle.left = El.currentStyle.left; Style.left = value | | 0; var px = style.pixelleft; Style.left = left;//Restore Data El.runtimeStyle.left = rsleft;//Restore data return px + "px"} var Rgb2hex = function (RGB) {RGB = Rgb.match (/^rgb\ (\d+), \s* (\d+), \s* (\d+)) $/); Return "#" +tohex (Rgb[1]) +tohex (rgb[2]) +tohex (rgb[3])} var tohex = function (x) {var hexdigits = [' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F '; return isNaN (x)? ': hexdigits[(x-x%) + hexdigits[x + 16]; var getstyle = function (el, style) {var value; if (!+ "\v1") {//special handling IE's opacity if (style = = "opacity") {return GetieopaCity (EL)} value = El.currentstyle[memorize (style)]; Height and width if special handling ie (/^ (height|width) $/.test (style)) {var values = (style = = ' width ')? [' Left ', ' right ']: [' top ', ' bottom '], size = 0; if (Isquirk) {return el[camelize ("offset-" +style)] + "px"}else{var client = parsefloat (El[camelize ("client-" +style)]), Paddinga = parsefloat (GetStyle (el, "padding-" + values[0]), PADDINGB = parsefloat (GetStyle (el, "padding-" + values[1])); Return (CLIENT-PADDINGA-PADDINGB) + "px"; }}else{if (style = = "float") {style = Propfloat; The value = Document.defaultView.getComputedStyle (EL, null). GetPropertyValue (Style)}//The following sections are all used to convert the above-derived imprecise value if (!/^\d+px $/.test (value)) {//Convert measurable value if (/(EM|PT|MM|CM|PC|IN|EX|REM|VW|VH|VM|CH|GR) $/.test (value)) {return Convertpixelvalue ( El,value); }//conversion percent, excluding font if (/%$/.test (value) && style!= "Font-size") {return parsefloat GetStyle (el.parentnode, "width" ) * Parsefloat (value)/100 + "px"}//convert border thin medium thick if (/^R). + (width) $/.test (style) {var s = style.replace ("width", "style"), B = {thin:["1px", "2px"], medium:["3px", "4px"], t hick:["5px", "6px"]}; if (value = = "Medium" && getstyle (el,s) = = "None") {return "0px"; Return!! Window. Xdomainrequest? B[VALUE][0]: b[value][1]; }//Convert margin Auto if (/^ (margin). +/.test (style) && value = = "Auto") {var father = El.parentnode; if (/msie 6/.test (navigator.useragent) && GetStyle (father, "text-align") = = "Center") {var fatherwidth = Parsefloat (GetStyle (father, "width")), _temp = GetStyle (father, "position"); Father.runtimeStyle.postion = "relative"; var offsetwidth = el.offsetwidth; Father.runtimeStyle.postion = _temp; Return (Fatherwidth-offsetwidth)/2 + "px"; return "0px"; }//Convert Top|left|right|bottom Auto if (top|left|right|bottom)/.test (style) && value = = "Auto") {return EL.GETBO Undingclientrect () [style]; //Convert Color if (style.search (/background|color/)!=-1) {var color = {Aqua: ' #0ff ', blACK: ' #000 ', Blue: ' #00f ', Gray: ' #808080 ', purple: ' #800080 ', fuchsia: ' #f0f ', Green: ' #008000 ', lime: ' #0f0 ', mar Oon: ' #800000 ', Navy: ' #000080 ', Olive: ' #808000 ', Orange: ' #ffa500 ', Red: ' #f00 ', Silver: ' #c0c0c0 ', teal: ' #008080 ' , Transparent: ' Rgba (0,0,0,0) ', White: ' #fff ', Yellow: ' #ff0 '} if (!! Color[value] {value = Color[value]} if (value = = "Inherit") {return GetStyle (El.parentnode,style); } if (/^rgb\ (\d+), \s* (\d+), \s* (\d+) \) $/.test (value)) {return Rgb2hex (value)}else if (/^#/.test (value)) {value = value. Replace (' # ', '); Return "#" + (Value.length = 3 Value.replace (/^ (\w) (\w) (\w) $/, ' $1$1$2$2$3$3 '): value); return value; } return value;//such as 0px} var css = function () {var a = arguments; if (a.length = = 1) {return GetStyle (this,a[0)}} var _ = function (EL) {var el = iselement (el)? El:d Ocument.geteleme Ntbyid (EL); var gene =!el.constructor? El:el.constructor.prototype; Gene.css = CSS; Gene.width = function () {//overriding width retUrn GetStyle (This, "width"); }; Gene.height = function () {//rewrite the height return getstyle (this, "height"); }; Return El} if (!window._) {//To avoid conflict with jquery $, I use _ as the only global variable of the class library window[' _ '] =_; } _.q = Isquirk; } () function text () {var BODY = document.body,html = document.documentelement; _ ("W1"). InnerHTML = _ (Body). width (); _ ("W2"). InnerHTML = _ (HTML). width (); _ ("H1"). InnerHTML = _ (body). Height (); _ ("H2"). InnerHTML = _ (HTML). Height (); _ ("Ml1"). InnerHTML = _ (Body). CSS ("Margin-left"); _ ("ML2"). InnerHTML = _ (HTML). CSS ("Margin-left"); _ ("MR1"). InnerHTML = _ (Body). CSS ("Margin-right"); _ ("MR2"). InnerHTML = _ (HTML). CSS ("Margin-right"); _ ("MT1"). InnerHTML = _ (Body). CSS ("Margin-top"); _ ("Mt2"). InnerHTML = _ (HTML). CSS ("Margin-top"); _ ("Mb1"). InnerHTML = _ (Body). CSS ("Margin-bottom"); _ ("MB2"). InnerHTML = _ (HTML). CSS ("Margin-bottom"); _ ("Pl1"). InnerHTML = _ (Body). CSS ("Padding-left"); _ ("Pl2"). InnerHTML = _ (HTML). CSS ("Padding-left"); _ ("Pr1"). InnerHTML = _ (Body). CSS ("Padding-right"); _ ("Pr2"). InnerHTML = _ (HTML). CSS ("Padding-right"); _ ("Bl1"). InnerHTML = _ (Body). CSS ("Border-left-width"); _ ("Bl2"). InnerHTML = _ (HTML). CSS ("Border-left-width"); _ ("BR1"). InnerHTML = _ (Body). CSS ("Border-right-width"); _ ("Br2"). InnerHTML = _ (HTML). CSS ("Border-right-width"); _ ("QQQ"). InnerHTML =!_.q? "Standard mode": "Eccentricity mode"; _ ("T1"). InnerHTML = _ (Body). CSS ("top"); _ ("T2"). InnerHTML = _ (HTML). CSS ("top"); _ ("L1"). InnerHTML = _ (Body). CSS ("left"); _ ("L2"). InnerHTML = _ (HTML). CSS ("left"); _ ("Ot1"). InnerHTML = Body.offsettop; _ ("Ot2"). InnerHTML = Html.offsettop; _ ("Ol1"). InnerHTML = Body.offsetleft; _ ("Ol2"). InnerHTML = Html.offsetleft; _ ("Ct1"). InnerHTML = Body.clienttop; _ ("Ct2"). InnerHTML = Html.clienttop; _ ("CL1"). InnerHTML = Body.clientleft; _ ("Cl2"). InnerHTML = Html.clientleft; _ ("Cw1"). InnerHTML = Body.clientwidth; _ ("Cw2"). InnerHTML = Html.clientwidth; _ ("Ow1"). InnerHTML = Body.offsetwidth; _ ("Ow2"). InnerHTML = Html.offsetwidth; _ ("SW1"). InnerHTML = Body.scrollwidth; _ ("SW2"). InnerHTML = Html.scrollwidth; </script> <title> exact value </title> </head> <body id= "Body" > <table border= "1" > < Thead> <th> Test Properties </th><th>document.body</th><th>document.documentelement</th > </thead> <tbody> <tr><th>width</th><td><span id= "W1" ></span> </td><td><span id= "W2" ></span></td></tr> <tr><th>height</th ><td><span id= "H1" ></span></td><td><span id= "H2" ></span></td> </tr> <tr><th>margin-left</th><td><span id= "ML1" ></span></td> <td><span id= "ML2" ></span></td></tr> <tr><th>margin-right</th> <td><span id= "MR1" ></span></td><td><span id= "MR2" ></span></td> </tr> <tr><th>margin-top</th>≪td><span id= "MT1" ></span></td><td><span id= "Mt2" ></span></td> </tr> <tr><th>margin-bottom</th><td><span id= "MB1" ></span></td> <td><span id= "MB2" ></span></td></tr> <tr><th>padding-left</th> <td><span id= "PL1" ></span></td><td><span id= "PL2" ></span></td> </tr> <tr><th>padding-right</th><td><span id= "PR1" ></span></td> <td><span id= "PR2" ></span></td></tr> <tr><th>border-left-width</th ><td><span id= "BL1" ></span></td><td><span id= "BL2" ></span></td ></tr> <tr><th>border-right-width</th><td><span id= "BR1" ></span> </td><td><span id= "Br2" ></span></td></tr> <tr><th> rendering mode </th ><TD colspan= ' 2 ' ><span id= "QQQ" ></span></td></tr> <tr><th>top</th> <td><span id= "T1" ></span></td><td><span id= "T2" ></span></td>< /tr> <tr><th>left</th><td><span id= "L1" ></span></td><td>< Span id= "L2" ></span></td></tr> <tr><th>offsettop</th><td><span ID = "Ot1" ></span></td><td><span id= "Ot2" ></span></td></tr> <tr> <th>offsetleft</th><td><span id= "ol1" ></span></td><td><span id= "Ol2" "></span></td></tr> <tr><th>clienttop</th><td><span id=" Ct1 "> </span></td><td><span id= "Ct2" ></span></td></tr> <tr><th> Clientleft</th><td><span id= "CL1" ></span></td><td><span id= "Cl2 "></span></td></tr> <tr><th>offsetwidth</th><td><span id=" Ow1 "></span></td><td><span id=" Ow2 "></span></td></tr> <tr><th >clientwidth</th><td><span id= "CW1" ></span></td><td><span id= "CW2" > </span></td></tr> <tr><th>scrollwidth</th><td><span id= "SW1" > </span></td><td><span id= "SW2" ></span></td></tr> </tbody> </ table> <p><button type= "button" onclick= "text ()" > Run code </button></p> <br> <br> <br> <br><br> <br><br> <br><br> <br><br> <br> </body& Gt </html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In standard mode, Firefox and other browsers we see offsetwidth equivalent maximum of 1007, because the Firefox offsetwidth is not clientwidth, and clientwidth is not including the scroll bar (the width of the scroll bar is fixed to 17px). In IE, offsetwidth is more than clientwidth two more border, which found that the problem, 1024-1003-17=4,4 should be two auto generation, and this auto should be border value, These two border are fixed dead in IE and cannot be modified by the following means.
Copy Code code as follows:
<style type= "Text/css" >
html{
border:0;
}
</style>
In other words, in standard mode, IE's HTML is border with a width of 2px that is not modifiable. In other words, my program has a bug that doesn't correctly display HTML border as 2px, embarrassing.
Look at the pattern of quirks again,
Firefox, and so do not have the so-called quirks mode, directly to see IE. Discovered that the mysterious 2px again appears, then appears in Document.body's clienttop,clientleft. So what is the concept of CSS in the document.body clienttop,clientleft of the quirks pattern? Let's take a look at the old picture given by Microsoft, when IE5 world, there is no such thing as the Standard model and the quirk pattern, so this picture is all in quirks mode.
It is not difficult to see, clientleft equivalent to borderleft,clienttop equivalent to BorderTop. As for the above Border-left-width and border-right-width, do not look, is wrong, because I did not consider these two elements in the standard mode and quirks mode of the problem. Since the border area of Document.body is up to 1024px, where does the face of HTML elements go?! Sorry, in the early days of Microsoft's vision, the BODY element is the representative document (a strong evidence is that in the quirks mode, the page's scroll bar is in the BODY element). The modular model, along with the various "standards" that the Firefox losers preach about without market share, is supported by Microsoft's reluctance. You see, documentelement such a cumbersome and silly name like Microsoft?! If it is Microsoft, it should be called HTML, and Document.boy as concise. In standard mode, we take scrollleft, To use Document.documentElement.scrollLeft, because at this time the body does not exist scroll bar, in the quirks mode, to use Document.body, although Microsoft to patch the way to add document.documentelement (really clumsy, no wonder Netscape will fail), but the scroll bar position is not quicker.
Http://www.jb51.net/article/21719.htm
