gpt4 book ai didi

html - IE 文档视口(viewport)边框

转载 作者:可可西里 更新时间:2023-11-01 13:40:22 24 4
gpt4 key购买 nike

在某些版本的 IE 中,文档查看端口周围有一个 2px 的细边框。我还没有注意到任何其他浏览器。这在计算页面和客户区域的鼠标位置时会造成一个小问题。最初,我只是简单地从每次计算中减去 2 来计算边界。

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

有什么方法可以在IE中获取文档视口(viewport)边框吗?

示例 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。因此,在修改页面的情况下获取视口(viewport)边框的正确方法(这适用于 IE 计算),您将需要使用 .currentStyle['borderWidth']。该脚本似乎适用于所有其他浏览器,除了 IE,无需执行边界检查(据我检查)。此外,您只需检查 IE 中的 borderWidth - 填充或边距似乎无关紧要。此外,在减去边框宽度时,请确保检查 borderTopWidthborderLeftWidth

无论如何,我把赏金奖励给了 Samuel,因为他是第一个提到它可能是默认浏览器样式的人。

最佳答案

你确定不是body标签的样式?我知道有些浏览器对 body 标签有默认样式。为了安全起见,我总是把

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

在我的样式表中

关于html - IE 文档视口(viewport)边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4059861/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com