浏览 4027 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-01-05
在做类似层拖拽等 或改变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 onload="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;" onload="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全部弄没 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-01-09
细节决定成败，深表佩服。
|
| 返回顶楼 | |
