IE document viewport border
In some versions of IE, there is a thin 2px border surrounding the document view port. I haven't noticed it for any other browsers yet. This p开发者_开发问答oses a slight problem in calculating mouse positions for the page and client areas. Originally, I simply subtracted 2 from each of the calculations to account for the border.
But then, when I tested it in different versions of IE and different IE embedding programs, I noticed that in some cases, there is no border. So, simply doing a check for IE and subtracting 2 won't cut it.
Is there any way of getting the document view port border in IE?
Example1: finding mouse position inside object
<html>
<head>
<script>
var isIE = (!window.addEventListener);
window.onload = function(){
var foo = document.getElementById('foo');
if (isIE) foo.attachEvent('onmousemove',check_coords);
else foo.addEventListener('mousemove',check_coords,false);
}
function check_coords(e){
var foo = document.getElementById('foo');
var objPos = getPos(foo);
if (isIE) mObj = [window.event.clientX+document.body.scrollLeft-objPos[0], window.event.clientY+document.body.scrollTop-objPos[1]];
else mObj = [e.pageX-objPos[0], e.pageY-objPos[1]];
foo.innerHTML = mObj;
}
function getPos(obj){
var pos = [0,0];
while (obj.offsetParent){
pos[0] += obj.offsetLeft;
pos[1] += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
</script>
<style>
body{
margin:0px;
padding:0px;
}
#foo{
border:3px solid black;
position:absolute;
left:30px;
top:52px;
width:300px;
height:800px;
background-color:yellow;
}
</style>
</head>
<body>
<div id='foo'>Test test</div>
</body>
</html>
At coordinate [0,0], Internet Explorer (the one's that have the border) returns [2,2]
Example2: getting scrollbar width
alert(screen.width-document.body.clientWidth);
With a scrollbar width of 17px, Internet Explorer (versions that have the border) returns 21px, not accounting for the 2px borders on each side.
UPDATE:
So, I guess it actually was a default style that is applied to the body tag. Sorry guys! I had originally done adocument.body.style.borderWidth to check if it was a css style. But I just realized a couple minutes ago, that I should have done document.body.currentStyle['borderWidth']. This returns medium. So, the correct way to get the viewport border without modifying the page (this ONLY applies to IE calculations), you will need to use .currentStyle['borderWidth']. The script appears to work in all other browsers, besides IE, without performing the border check (as far as I have checked). Furthermore, you only have to check for borderWidth in IE- padding or margin don't seem to matter. Also, when subtracting border-widths, make sure you're checking for borderTopWidth AND borderLeftWidth.
Anyways, I awarded the bounty to Samuel, since he was the first to mention it might be a default browser style.
Are you sure it isn't the style of the body tag? I know that some browsers have a default style to the body tag. To be safe I always put
body{
padding:0px;
margin:0px;
}
in my stylesheet
For better cross-browser consistency you should try to use some CSS reset like Eric Meyer's CSS reset or some modern front-end framework like HTML5 Boilerplate.
function getPos(obj){
var pos = [0,0];
while (obj.offsetParent){
pos[0] += obj.offsetLeft-1;
pos[1] += obj.offsetTop-1;
obj = obj.offsetParent;
}
return pos;
}
</script>
<style>
body{
margin:0;
padding:0;
border:none;
outline:none;
}
#foo{
border:3px solid #000;
position:absolute;
top:50px;
left:50px;
margin:0;
padding:0;
outline:none;
width:300px;
height:800px;
background-color:yellow;
}</style>
</head>
<body>
<div id='foo'>Test test</div>
</body>
</html>
I had the same problem. Here's the solution I found: document.body.clientLeft is usually zero, but when IE's viewport has insets, it is 2. Thus you can substract this value from the event's coordinates.
var x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
var y = e.clientY + document.body.scrollTop - document.body.clientTop;
加载中,请稍侯......
精彩评论