个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
在某些版本的 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 - 填充或边距似乎无关紧要。此外，在减去边框宽度时，请确保检查 borderTopWidth 和 borderLeftWidth。
无论如何，我把赏金奖励给了 Samuel，因为他是第一个提到它可能是默认浏览器样式的人。
最佳答案
你确定不是body标签的样式？我知道有些浏览器对 body 标签有默认样式。为了安全起见，我总是把
body{
padding:0px;
margin:0px;
}
在我的样式表中
关于html - IE 文档视口(viewport)边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4059861/
24
4
0
我正在尝试获得一个按钮，按下该按钮时会改变颜色。当再次按下时，它应该变回原来的颜色。我究竟做错了什么？ 我的模板中的按钮: export default { data: {
我是一名优秀的程序员,十分优秀！