`

IE和Firefox浏览器兼容问题总结

阅读更多
鼠标及对象坐标控制属性
offsetTop
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。


clientHeight
获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

clientLeft
获取 offsetLeft 属性和客户区域的实际左边之间的距离。

clientTop
获取 offsetTop 属性和客户区域的实际顶端之间的距离。

clientWidth
获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。


SCROLL属性
scroll
设置或获取滚动是否关闭。

scrollHeight
获取对象的滚动高度。

scrollLeft
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollTop
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

scrollWidth
获取对象的滚动宽度。

event属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

screenX
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标

offsetX
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

clientX
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条

IE与FireFox的兼容性问题(JoeCom整理--未完待续)

window.event

IE:有window.event对象
FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)

鼠标当前坐标

IE:event.x和event.y。
FF:event.pageX和event.pageY。
通用:两者都有event.clientX和event.clientY属性。

鼠标当前坐标(加上滚动条滚过的距离)

IE:event.offsetX和event.offsetY。
FF:event.layerX和event.layerY。
标签的x和y的坐标位置:style.posLeft 和 style.posTop

IE:有。
FF:没有。
通用:object.offsetLeft 和 object.offsetTop。

窗体的高度和宽度

IE:document.body.offsetWidth和document.body.offsetHeight。注意:此时页面一定要有body标签。
FF:window.innerWidth和window.innerHegiht,以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用:document.body.clientWidth和document.body.clientHeight。

添加事件

IE:element.attachEvent("onclick", func);。
FF:element.addEventListener("click", func, true)。
通用:element.onclick=func。虽然都可以使用onclick事件,但是onclick和上面两种方法的效果是不一样的,onclick 只有执行一个过程,而attachEvent和addEventListener执行的是一个过程列表,也就是多个过程。例如: element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。

标签的自定义属性

IE:如果给标签div1定义了一个属性value,可以div1.value和div1["value"]取得该值。
FF:不能用div1.value和div1["value"]取。
通用:div1.getAttribute("value")。
父节点、子节点和删除节点

IE:parentElement、parement.children,element.romoveNode(true)。
FF:parentNode、parentNode.childNodes,node.parentNode.removeChild(node)。
画图

IE:VML。
FF:SVG。

CSS:透明

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
CSS:圆角

IE:不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
CSS:双线凹凸边框

IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。
分享到:
评论

相关推荐

    javascript在IE和Firefox中兼容性问题

    本篇将主要探讨JavaScript在Internet Explorer (IE) 和Firefox之间的兼容性挑战,并通过给出的文件名列表解析这些测试用例所涉及的知识点。 1. **createDocument测试.html** 在IE和Firefox中,创建XML文档的方法...

    ie和火狐的兼容问题总结

    ### IE和火狐的兼容问题总结 在前端开发过程中,我们经常会遇到不同浏览器之间的兼容性问题,特别是Internet Explorer(简称IE)与Firefox(火狐)之间的差异。由于这两种浏览器在处理CSS和JavaScript方面存在显著...

    Firefox浏览器兼容JS脚本

    本文将围绕Firefox浏览器与Internet Explorer(简称IE)之间关于JavaScript脚本的兼容性差异进行详细探讨,并通过具体的示例来帮助开发者更好地理解和解决实际开发过程中遇到的问题。 #### 二、关键知识点详解 ###...

    浏览器兼容(支持IE和firefox)

    浏览器兼容性问题一直是Web开发中的一个痛点,尤其是在处理IE6和Firefox这两个有着显著差异的浏览器时。以下是对这些兼容性问题的深入分析和解决方案。 首先,我们关注的是IE6中的`a`标签链接问题。在IE6中,如果`a...

    JavaScript在IE和Firefox(火狐)的不兼容问题解决

    标题与描述均聚焦于“JavaScript在IE和Firefox(火狐)的不兼容问题解决”,这表明文章旨在探讨并提供解决方案来处理在不同浏览器环境下的JavaScript兼容性问题,尤其是在Internet Explorer(IE)和Mozilla Firefox...

    ie firefox 兼容问题大全

    本文将详细总结并分析IE与Firefox在CSS、DOM操作等方面的兼容性问题,并提供相应的解决方案。 #### 二、关键兼容性问题及解决方案 1. **表单元素的访问方式** - **问题描述**:在IE中,可以通过`document.form...

    Firefox, IE5, IE5.5, IE6, IE7, IE8多种浏览器兼容的问题

    ### Firefox, IE5, IE5.5, IE6, IE7, IE8 多种浏览器兼容的问题 在早期的Web开发阶段,不同的浏览器之间存在显著的技术差异,这导致了跨浏览器兼容性问题的出现。本篇文章将针对Firefox、IE5、IE5.5、IE6、IE7以及...

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    CSS 兼容大全 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等浏览器 CSS 兼容大全是指在不同的浏览器中,例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等,如何使网页正常显示的技术。这个技术的核心是 CSS Hack,即...

    浏览器兼容性问题收集(IE,Firefox,Chrome,Safri)

    浏览器兼容性问题收集(IE, Firefox, Chrome, Safari) 本文主要收集了浏览器兼容性问题,涵盖了 IE, Firefox, Chrome, Safari 等多种浏览器的兼容性问题。这些问题都是 WEB 开发者们经常遇到的问题,了解这些问题...

    ie6 ie7 ff浏览器兼容

    ### 浏览器兼容性问题解析:针对IE6、IE7与Firefox的样式处理 在Web开发中,浏览器兼容性始终是一项重要的考虑因素。不同浏览器对CSS的支持程度不一,尤其是对于早期版本的Internet Explorer(IE)如IE6、IE7,以及...

    css入门教程IE和Firefox浏览器CSS兼容性技巧整理.docx

    【CSS入门教程:IE和Firefox浏览器CSS兼容性技巧】 在网页设计中,CSS(层叠样式表)扮演着至关重要的角色,它使得我们能够控制页面的布局和样式。然而,不同浏览器之间对于CSS的支持程度和解析方式存在差异,尤其...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...

    css和js的浏览器兼容问题汇总

    总的来说,解决CSS和JavaScript的浏览器兼容问题需要开发者对各种浏览器的特性有深入理解,并善于运用工具和技巧进行调试和优化。如使用Firebug、Web Developer、DebugBar等开发工具可以帮助开发者快速定位和解决...

    IE与Firefox的CSS兼容大全

    在网页设计中,CSS(层叠样式表)的兼容性是一个关键问题,特别是对于历史悠久的Internet Explorer(IE)和相对现代的Firefox浏览器。由于这两者对CSS标准的解析方式不同,开发者经常面临兼容性挑战。以下是一些针对...

    ie chrome firefox 兼容

    浏览器兼容性处理是 Web 开发中一个非常重要的问题,因为不同的浏览器可能会有不同的行为和特性。通过使用 userAgent 属性和正则表达式,我们可以实现浏览器兼容性处理,确保我们的 Web 应用程序可以在不同的浏览器...

    Firefox浏览器兼容JS脚本供参考

    本文将详细解析在Firefox浏览器中实现JS脚本兼容的一些关键点,以确保代码在Firefox和其他浏览器上的表现一致。 1. **window.event 兼容脚本** 在IE中,`window.event`可以直接获取当前事件对象,但在Firefox中则...

Global site tag (gtag.js) - Google Analytics