Question

在某些版本的IE中，文档视图端口周围有一个薄的2px边框。我还没有注意到任何其他浏览器。这在计算页面和客户区域的鼠标位置时会产生轻微问题。最初，我只是从每个计算中减去2来计算边界。

但是，当我在不同版本的IE和不同的IE嵌入程序中测试它时，我注意到在某些情况下，没有边框。因此，只需检查IE并减去2就不会削减它。

有没有办法在IE中获取文档视图端口边框？

示例1：在对象内找到鼠标位置

<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>

在坐标[0,0]处，Internet Explorer（具有边框的那个）返回[2,2]

示例2：获取滚动条宽度

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

滚动条宽度为17px时，Internet Explorer（具有边框的版本）返回21px，不考虑每边的2px边框。

更新
所以，我猜它实际上是一个应用于body标签的默认样式。对不起大家！我最初做了一个document.body.style.borderWidth来检查它是否是一种CSS样式。但我刚刚在几分钟前意识到，我应该做document.body.currentStyle['borderWidth']。这将返回medium。因此，在没有修改页面的情况下获取视口边框的正确方法（此仅适用于IE计算），您将需要使用{ {1}}。除了IE之外，该脚本似乎可以在所有其他浏览器中使用，而无需执行边框检查（据我所知）。此外，您只需要在IE填充或边距中检查 borderWidth 似乎无关紧要。此外，在减去边框宽度时，请务必检查.currentStyle['borderWidth']和borderTopWidth。

无论如何，我将奖金授予Samuel，因为他是第一个提到它可能是默认的浏览器风格。

Answer 1

你确定它不是身体标签的样式吗？我知道有些浏览器的body标签有默认样式。为了安全起见，我总是把

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

在我的样式表中

Answer 2

为了更好的跨浏览器一致性，您应该尝试使用一些CSS重置，如Eric Meyer's CSS reset或一些现代前端框架，如HTML5 Boilerplate。

Answer 3

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>

Answer 4

我遇到了同样的问题。这是我找到的解决方案：document.body.clientLeft通常为零，但是当IE的视口有插图时，它是2.因此，您可以从事件的坐标中减去此值。

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

IE文档视口边框

4 个答案: