Координаты верхнего левого угла <body> нам могут понадобится, когда body.style.position == 'static', так? Значит в Standards Compliance Mode у нас relative-блоком будет <html>, не смотря на то, что documentElement.style.position тоже будет static. Попробуем добавить в body новый блок и определеить его положение:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>body offsets</title>
<style type="text/css">
html {
background: #ccf;
}
body {
width: 500px;
margin: 10% auto;
padding: 20px;
border: 10px solid #fff;
background: #ffc;
}
.rect {
position: absolute;
width: 100px;
height: 100px;
background: #000;
}
</style>
<script type="text/javascript">
function bodyOffsets() {
var top = 0;
var left = 0;
var doc = document;
var body = doc.body;
var ie = /*@cc_on!@*/false;
var opera = window.opera && window.opera.version;
var standards = doc.compatMode === 'CSS1Compat';
var node = doc.createElement('div');
var style = node.style;
style.position = 'static';
style.margin = '0';
style.padding = '0';
style.border = 'none';
style.width = 'auto';
style.height = '0';
style.float = 'none';
var computedStyle = ie ? function(node) {
return node.currentStyle;
} : function(node) {
return doc.defaultView.getComputedStyle(node, null);
};
style = computedStyle(body);
if(standards) {
if(node.getBoundingClientRect) {
// IE, Firefox 3, Opera 9.5, Google Chrome 2
}
else {
// Firefox 2, Opera 9, Safari
if(style.position == 'static') {
body.insertBefore(node, body.firstChild);
top = node.offsetTop - (parseInt(style.paddingTop) || 0);
left = node.offsetLeft - (parseInt(style.paddingLeft) || 0);
if(opera) {
top -= parseInt(style.borderTopWidth) || 0;
left -= parseInt(style.borderLeftWidth) || 0;
}
body.removeChild(node);
}
else {
// …
}
}
}
else {
// …
}
return {top: top, left: left};
}
window.onload = function() {
var pos = bodyOffsets(), node = document.createElement('div');
node.className = 'rect';
node.style.top = pos.top + 'px';
node.style.left = pos.left + 'px';
document.body.appendChild(node);
};
</script>
</head>
<body>
<div style="height:200em;"></div>
</body>
</html>
Проблема существовала в Firefox 2, Opera 9 и Safari. Для Standards Compliance Mode вроде бы решено
давайте теперь остальные варианты доделаем?)