Home >Web Front-end >CSS Tutorial >Compatibility issues between IE and FireFox_Experience exchange

Compatibility issues between IE and FireFox_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:10:291694browse

window.event

IE: There is a window.event object
FF: There is no window.event object. Event objects can be passed as arguments to functions. Such as onmousemove=doMouseMove(event)
Current mouse coordinates

IE: event.x and event.y.
FF: event.pageX and event.pageY.
Universal: Both have event.clientX and event.clientY properties.
The current coordinates of the mouse (plus the distance the scroll bar has rolled)

IE: event.offsetX and event.offsetY.
FF: event.layerX and event.layerY.
The x and y coordinate positions of the tag: style.posLeft and style.posTop

IE: Yes.
FF: No.
Common: object.offsetLeft and object.offsetTop.
Height and width of the form

IE: document.body.offsetWidth and document.body.offsetHeight. Note: The page must have a body tag at this time.
FF: window.innerWidth and window.innerHegiht, and document.documentElement.clientWidth and document.documentElement.clientHeight.
Common: document.body.clientWidth and document.body.clientHeight.
Add event

IE: element.attachEvent("onclick", func);.
FF: element.addEventListener("click", func, true).
General: element.onclick=func. Although the onclick event can be used, the effects of onclick and the above two methods are different. onclick only executes one process, while attachEvent and addEventListener execute a process list, that is, multiple processes. For example: element.attachEvent("onclick", func1);element.attachEvent("onclick", func2) so that both func1 and func2 will be executed.
Custom attributes of the tag

IE: If an attribute value is defined for the tag div1, the value can be obtained by div1.value and div1["value"].
FF: Cannot be obtained using div1.value and div1["value"].
General: div1.getAttribute("value").
Parent node, child node and delete node

IE: parentElement, parement.children, element.romoveNode(true).
FF: parentNode, parentNode.childNodes, node.parentNode.removeChild(node).
Draw

IE: VML.
FF: SVG.
CSS: Transparent

IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF:opacity:0.6.
CSS: Rounded corners

IE: Rounded corners are not supported.
FF: -moz-border-radius:4px, or -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -border-radius-bottomright:4px;.
CSS: double-line bump border

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;.​

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn