Home >Web Front-end >CSS Tutorial >Compatibility issues between IE and FireFox_Experience exchange
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;.