All geek questions in one place

IE Document Viewing Border

Some versions of IE have a thin 2px border surrounding the document view port. I have not noticed it for other browsers yet. This poses a small problem when calculating mouse positions for pages and client areas. Initially, 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 implementation programs, I noticed that in some cases there is no border. Thus, just doing a check for IE and subtracting 2 will not cut it.

Is there a way to get the border of the document view port in IE?

Example1: determining the position of the mouse inside an 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 [0,0], Internet Explorer (the one that has the border) returns [2,2]

2:

alert(screen.width-document.body.clientWidth);

17 Internet Explorer ( ) 21px, 2px .

UPDATE:
, , , body. ! document.body.style.borderWidth, , css. , document.body.currentStyle['borderWidth']. medium. , ( IE), .currentStyle['borderWidth']. script, , , IE, ( ). , , borderWidth IE-padding margin . , , borderTopWidth borderLeftWidth.

, , , .

+3
4

, body? , body. ,

body{
    padding:0px;
    margin:0px;
}

+2

CSS reset, Eric Meyer CSS reset , end HTML5 Boilerplate.

0

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>

0

. : document.body.clientLeft , IE viewport , 2. , .

var x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
var y = e.clientY + document.body.scrollTop - document.body.clientTop;
0
source

Source: https://habr.com/ru/post/1772275/

More articles:


All Articles