`
fengpeng
  • 浏览: 99885 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

IEJavaScript编程HTML浏览器
阅读更多

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

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

例如下面的代码

代码
  1. <html>  
  2.  <head>  
  3.   <script type="text/javascript">  
  4.     function init(){   
  5.         alert(document.body.offsetWidth +","+ document.body.clientWidth)   
  6.     }   
  7.   </script>  
  8.  </head>  
  9.  <body onload="init();">  
  10.      
  11.  </body>  
  12. </html>  
<script>render_code();</script>
把浏览器窗口最大化 可以发现 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

现在代码变成这样了

代码
  1. <html>  
  2.  <head>  
  3.   <script type="text/javascript">  
  4.     function init(){   
  5.         alert(document.body.offsetWidth +","+ document.body.clientWidth)   
  6.     }   
  7.   </script>  
  8.  </head>  
  9.  <body style="margin:0px;overflow:auto;border:0px;" onload="init();">  
  10.      
  11.  </body>  
  12. </html>  
<script>render_code();</script>
现在 alert出来的结果在 ie 和 ff下终于一样了

 

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

分享到：
| 数据库的设计范式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics