Html IE文档视口边框_Html_Css_Internet Explorer_Border

Html IE文档视口边框

html css internet-explorer

Html IE文档视口边框,html,css,internet-explorer,border,Html,Css,Internet Explorer,Border,在某些版本的IE中，文档视图端口周围有一个2px的薄边框。我还没有在其他浏览器上注意到它。这在计算页面和客户端区域的鼠标位置时会产生一个小问题。最初，我只是从每个计算中减去2来计算边界但是，当我在不同版本的IE和不同的IE嵌入程序中测试它时，我注意到在某些情况下，没有边界。所以，简单地检查IE并减去2不会减少它有没有办法在IE中获取文档视图端口边界示例1:在对象内查找鼠标位置 <html> <head> <script> var

在某些版本的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>

当滚动条宽度为17px时，InternetExplorer（有边框的版本）返回21px，不考虑每侧的2px边框

更新：
所以，我猜它实际上是应用于body标记的默认样式。对不起，伙计们！我最初做了一个

document.body.style.borderWidth

来检查它是否是css样式。但几分钟前我才意识到，我应该做

document.body.currentStyle['borderWidth']

。这将返回

medium

。因此，在不修改页面的情况下获取视口边框的正确方法（此仅适用于IE计算），您需要使用
.currentStyle['borderWidth']
。该脚本似乎在除IE之外的所有其他浏览器中都能工作，而不执行边界检查（据我所知）。此外，您只需检查IE中的边框宽度-填充或边距似乎并不重要。另外，在减去边框宽度时，请确保您正在检查
borderTopWidth
和
borderLeftWidth

不管怎样，我把赏金颁给了Samuel，因为他是第一个提到这可能是默认的浏览器样式的人。
你确定这不是body标签的样式吗？我知道有些浏览器的body标签有默认样式。为了安全起见，我总是把

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

在我的样式表中
为了更好的跨浏览器一致性，你应该尝试使用一些CSS重置类或现代前端框架类。
函数getPos（obj）{

var pos=[0,0]；

while（obj.offsetParent）{

pos[0]+=obj.offsetLeft-1；

pos[1]+=obj.offsetTop-1；

obj=obj.offsetParent；

}

return pos；

}

body{ 保证金：0；填充：0；边界：无；大纲：无； }

#foo{ 边框：3倍实心#000；位置：绝对位置；顶部：50px；左：50px；保证金：0；填充：0；大纲：无；宽度：300px；高度：800px；背景颜色：黄色； }

测试测试

我也有同样的问题。下面是我找到的解决方案：
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;

你能指定你所说的“客户区”——文档的查看端口是什么意思吗？是的，谢谢。我忘了它的实际名称了。@Azmisov，但这个边界应该不是问题：它在文档之外，因此不会影响鼠标位置的计算。只是
0,0
角移动了一点。你能举个例子说明这是一个问题吗？除了IE9的标准模式（以及未来的IE版本各自的标准呈现模式）之外，IE的任何版本都应该有边界。你能定义一些情况吗？这发生在哪个IE版本上。。这样开发人员就可以很快解决问题。是的，这似乎无法解决问题。我也做了一个更好的例子来演示。OP已经说过：边框来自浏览器客户端本身，不是CSS问题！
var x = e.clientX + document.body.scrollLeft - document.body.clientLeft; var y = e.clientY + document.body.scrollTop - document.body.clientTop;