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

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

阅读更多

在做类似层拖拽等 或改变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全部弄没

分享到:
评论

相关推荐

    超级爽的 js 遮罩层 谦容 FF IE 支持拖动...

    在JavaScript编程中,创建一个兼容Firefox(FF)和Internet Explorer(IE)的遮罩层是一项常见的需求,特别是在构建交互式Web应用或者需要弹出框、提示信息时。标题中的"超级爽的 js 遮罩层 谦容 FF IE 支持拖动...

    html和css基础

    本资源摘要信息将从HTML和CSS基础知识点入手,总结出一些重要的知识点,帮助读者更好地理解和应用HTML和CSS技术。 一、HTML基础知识点 1. HTML文档声明: HTML文档必须以DOCTYPE声明开头,以便遵守W3C标准。常见的...

    CSS基础知识汇总(代码+知识点框图)

    本资料集合了CSS的基础知识,包括代码示例和用xmind框图清晰呈现的知识点体系,适合初学者快速入门和有经验的开发者复习巩固。 **1. CSS语法基础** CSS语法主要包括选择器、属性和值。选择器定位HTML元素,属性...

    javascript获取鼠标位置部分的实例代码(兼容IE,FF)

    但在IE中,这两个属性是不存在的,这时我们则需要使用clientX和clientY属性,并且要加上document.body的scrollLeft和scrollTop以及document.documentElement的scrollLeft和scrollTop。clientX和clientY代表的是鼠标...

    Css复习题.docx

    Css复习题中关于浏览器默认样式的说法正确的是:IE默认页边距为10px,通过body的margin属性设置,FF默认页边距为8px,通过body的padding属性设置,IE默认列表左缩进为40px,通过ul、ol的margin属性设置,FF默认列表...

    DIV+CSS必考题.pdf

    以下是一些关于DIV+CSS的重要知识点,包括问题和解决方案。 1. 超链接状态优先级问题:在CSS中,链接有四种状态,即link(未访问)、visited(已访问)、hover(鼠标悬停)和active(活动状态)。当链接被点击访问...

    IE FF OPERA都可用的弹出层实现代码

    标题中的“IE FF OPERA都可用的弹出层实现代码”指的是这段JavaScript代码可以在Internet Explorer (IE)、Firefox (FF) 和 Opera 浏览器中实现弹出层的效果。弹出层通常是一种网页设计技术,它允许在用户与页面交互...

    通杀所有浏览器兼容问题

    ### 一、基础知识重置 #### 1. CSS Reset 为了解决浏览器默认样式不一致的问题,开发者通常会在项目开始时使用CSS Reset或Normalize CSS来统一元素的默认样式。例如,在文件中提到的“body,p,hr,ul,li,dl,dt,dd,...

    2022年HTML语言剖析(三)文件标记CSSHTML教程.docx

    在2022年的HTML语言剖析中,我们深入探讨了文件标记、CSS和HTML的相关知识。在本篇教程中,我们将重点关注HTML的基本架构以及&lt;body&gt;标记的参数设定。 HTML文件的结构通常包括三个主要部分:、和&lt;body&gt;。整个文档被...

    javascript小技巧&nbsp;&nbsp;超强推荐第3 5页.docx

    6. **JavaScript的数组与字典用法与遍历对象的属性技巧:** 掌握这些基础知识对于日常开发非常重要。 7. **不要用 `for...in` 语句对数组进行遍历:** `for...in` 主要用于遍历对象的属性,对于数组而言,最好使用 ...

    Dreamweaver网页设计作业.pdf

    13. 给出的CSS样式代码定义了链接在不同状态下的颜色:默认链接是红色,访问过的链接是绿色,鼠标悬停时是蓝色,活动链接是黑色。 14. 实现页面自动跳转效果的按钮是C,通常使用`&lt;meta&gt;`标签的`http-equiv`属性和`...

    网页前端笔试题库及参考答案.pdf

    在网页前端开发中,了解和...以上就是关于网页前端开发的一些基础知识点,包括HTML标签、CSS样式、浏览器兼容性以及文件操作等方面的内容。这些知识点是前端开发者必须掌握的基础,对于网页设计和开发工作至关重要。

    北大青鸟初学HTML基础代码

    ### 北大青鸟初学HTML基础代码 ...以上内容覆盖了HTML的基础语法和一些常见的特效代码,适合初学者学习使用。这些知识点不仅有助于理解HTML的基本结构和功能,还可以帮助开发者更好地设计和优化网页布局与交互体验。

    Dreamweaver网页设计模拟试题库.doc

    【Dreamweaver网页设计模拟试题库】 ...这个模拟试题库旨在帮助学习者巩固Dreamweaver和网页设计的基础知识,通过练习来提高设计和编码技能。熟悉这些概念和技巧将有助于构建专业、响应式的Web页面。

    div背景全屏自适应

    #### 二、基础知识 1. **HTML基础**:了解基本的HTML结构和语义化标签。 2. **CSS基础**:熟悉CSS选择器、盒模型、布局方式等概念。 3. **响应式设计**:掌握媒体查询等技巧,确保页面在不同设备上都能良好展示。 ...

    css面试试题汇总.pdf

    根据提供的文件内容,这段文字似乎是CSS代码片段以及相关的HTML标记混合在一起,夹杂着一些描述性的文字,可能是一些面试题目的答案或者解释。由于内容较为混乱且不完整,我会尽量从这些信息中提取相关的CSS知识点并...

    ACCP4.0_S1_html_内部测试机试题

    综上所述,本次ACCP4.0_S1_html_内部测试机试题涵盖了HTML和JavaScript的基础知识,强调了页面布局、表单验证、事件处理、数据传递、编码规范以及浏览器兼容性等多个方面的技能。对于参加考试的考生而言,全面掌握...

    网站设计师面试题.docx

    - FF下文本无法撑开容器高度:可以通过设置`min-height`来解决。 - IE无法设置转动条颜色:在IE中,滚动条样式不可直接设置,需要使用特定的CSS hack。 - 容器高度问题:IE6默认行高导致问题,可以使用`overflow`...

    css样式表基础

    ### CSS样式表基础知识点 #### 一、CSS简介 **CSS**(层叠样式表,Cascading Style Sheets)是一种用于定义网页外观和布局的语言,它由W3C(World Wide Web Consortium)制定。CSS的主要功能是控制网页元素的样式...

Global site tag (gtag.js) - Google Analytics