关于body的"大小"在ie和ff下的一些基础知识

最新推荐文章于 2024-08-05 10:20:29 发布

xnxylf

最新推荐文章于 2024-08-05 10:20:29 发布

阅读量446

点赞数

文章标签： ie border function html 浏览器 table

在做类似层拖拽等或改变table div 等元素的大小的时候
常常需要使用各种 clientWidth clientHeight clientX clientY offsetWidth offsetHeight offsetLeft ....
总之各种定位

大家都知道对于这些东西的取值 ie 和 ff 是不一样的
我们在编程的时候总是会用各种方法来消除他们之间的不同.

例如下面的代码

<html>
 <head>
  <script type="text/javascript">
	function init(){
		alert(document.body.offsetWidth +","+ document.body.clientWidth)
	}
  </script>
 </head>
 <body οnlοad="init();">
  
 </body>
</html>

把浏览器窗口最大化可以发现 ie 和 ff 两者对
document. body. offsetWidth 和 document. body.clientWidth
的取值都不一样具体是什么大家可以自己看看
这是后可以通过给 body 加上 style="margin:0px;" 来让两者的 document. body. offsetWidth一样

可是这时候 document. body.clientWidth 依然不同
可以很明显的看出来 ie下有滚动条 ff下没有 ok 我们全给它弄成没有吧
加上overflow:auto;
再来看看咦?有变化但还是不一样
怎么让他们一样呢?再给 body加一个 padding:0px呢?
加上后你会发现没变化
那对于这么一个简单的页面该怎么做才能让 ie 和 ff下得到一样的结果呢

答案是再加一个 border
给 body加上 border:0px none

现在代码变成这样了

<html>
 <head>
  <script type="text/javascript">
	function init(){
		alert(document.body.offsetWidth +","+ document.body.clientWidth)
	}
  </script>
 </head>
 <body style="margin:0px;overflow:auto;border:0px;" οnlοad="init();">
  
 </body>
</html>

现在 alert出来的结果在 ie 和 ff下终于一样了

总结一下:
1 对于 overflow ie和ff的默认值不同
2 对于 body的 margin默认值一样但是ff不会把他算进 document. body.clientWidth内
3 在整个过程中,我们最容易忽视的就是 body的border
在ff下 body的border会被忽略不记入页面的宽度和高度里
为了让ie 和ff结果一样我们最好把 body的border全部弄没

xnxylf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于body的"大小"在ie和ff下的一些基础知识

在做类似层拖拽等或改变table div 等元素的大小的时候常常需要使用各种 clientWidth clientHeight clientX clientY offsetWidth offsetHeight offsetLeft .... 总之各种定位大家都知道对于这些东西的取值 ie 和 ff 是不一样的我们在编程的时候总是会用各种方法来消除他们之间的不同. 例如下面的代码
复制链接

扫一扫