在做类似层拖拽等 或改变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全部弄没
分享到：
相关推荐
在JavaScript编程中，创建一个兼容Firefox（FF）和Internet Explorer（IE）的遮罩层是一项常见的需求，特别是在构建交互式Web应用或者需要弹出框、提示信息时。标题中的"超级爽的 js 遮罩层 谦容 FF IE 支持拖动...
本资源摘要信息将从HTML和CSS基础知识点入手，总结出一些重要的知识点，帮助读者更好地理解和应用HTML和CSS技术。 一、HTML基础知识点 1. HTML文档声明： HTML文档必须以DOCTYPE声明开头，以便遵守W3C标准。常见的...
本资料集合了CSS的基础知识，包括代码示例和用xmind框图清晰呈现的知识点体系，适合初学者快速入门和有经验的开发者复习巩固。 **1. CSS语法基础** CSS语法主要包括选择器、属性和值。选择器定位HTML元素，属性...
但在IE中，这两个属性是不存在的，这时我们则需要使用clientX和clientY属性，并且要加上document.body的scrollLeft和scrollTop以及document.documentElement的scrollLeft和scrollTop。clientX和clientY代表的是鼠标...
Css复习题中关于浏览器默认样式的说法正确的是：IE默认页边距为10px，通过body的margin属性设置，FF默认页边距为8px，通过body的padding属性设置，IE默认列表左缩进为40px，通过ul、ol的margin属性设置，FF默认列表...
以下是一些关于DIV+CSS的重要知识点，包括问题和解决方案。 1. 超链接状态优先级问题：在CSS中，链接有四种状态，即link（未访问）、visited（已访问）、hover（鼠标悬停）和active（活动状态）。当链接被点击访问...
标题中的“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语言剖析中，我们深入探讨了文件标记、CSS和HTML的相关知识。在本篇教程中，我们将重点关注HTML的基本架构以及<body>标记的参数设定。 HTML文件的结构通常包括三个主要部分：、和<body>。整个文档被...
6. **JavaScript的数组与字典用法与遍历对象的属性技巧：** 掌握这些基础知识对于日常开发非常重要。 7. **不要用 `for...in` 语句对数组进行遍历：** `for...in` 主要用于遍历对象的属性，对于数组而言，最好使用 ...
13. 给出的CSS样式代码定义了链接在不同状态下的颜色：默认链接是红色，访问过的链接是绿色，鼠标悬停时是蓝色，活动链接是黑色。 14. 实现页面自动跳转效果的按钮是C，通常使用`<meta>`标签的`http-equiv`属性和`...
在网页前端开发中，了解和...以上就是关于网页前端开发的一些基础知识点，包括HTML标签、CSS样式、浏览器兼容性以及文件操作等方面的内容。这些知识点是前端开发者必须掌握的基础，对于网页设计和开发工作至关重要。
### 北大青鸟初学HTML基础代码 ...以上内容覆盖了HTML的基础语法和一些常见的特效代码，适合初学者学习使用。这些知识点不仅有助于理解HTML的基本结构和功能，还可以帮助开发者更好地设计和优化网页布局与交互体验。
【Dreamweaver网页设计模拟试题库】 ...这个模拟试题库旨在帮助学习者巩固Dreamweaver和网页设计的基础知识，通过练习来提高设计和编码技能。熟悉这些概念和技巧将有助于构建专业、响应式的Web页面。
#### 二、基础知识 1. **HTML基础**：了解基本的HTML结构和语义化标签。 2. **CSS基础**：熟悉CSS选择器、盒模型、布局方式等概念。 3. **响应式设计**：掌握媒体查询等技巧，确保页面在不同设备上都能良好展示。 ...
根据提供的文件内容，这段文字似乎是CSS代码片段以及相关的HTML标记混合在一起，夹杂着一些描述性的文字，可能是一些面试题目的答案或者解释。由于内容较为混乱且不完整，我会尽量从这些信息中提取相关的CSS知识点并...
综上所述，本次ACCP4.0_S1_html_内部测试机试题涵盖了HTML和JavaScript的基础知识，强调了页面布局、表单验证、事件处理、数据传递、编码规范以及浏览器兼容性等多个方面的技能。对于参加考试的考生而言，全面掌握...
- FF下文本无法撑开容器高度：可以通过设置`min-height`来解决。 - IE无法设置转动条颜色：在IE中，滚动条样式不可直接设置，需要使用特定的CSS hack。 - 容器高度问题：IE6默认行高导致问题，可以使用`overflow`...
### CSS样式表基础知识点 #### 一、CSS简介 **CSS**（层叠样式表，Cascading Style Sheets）是一种用于定义网页外观和布局的语言，它由W3C（World Wide Web Consortium）制定。CSS的主要功能是控制网页元素的样式...