Some differences between Firefox and IE Development

1. Window. Event

* Ie: window. event object
* FF: There is no window. event object. You can pass the event object to the function parameters. For example, onmousemove = domousemove (Event)

2. Current mouse Coordinate

* Ie: event. X and event. Y.
* FF: event. pagex and event. Pagey.
* Common: both have the event. clientx and event. clienty attributes.

3. The current coordinates of the mouse (plus the scroll bar rolling distance)

* Ie: event. offsetx and event. offsety.
* FF: event. layerx and event. layery.

4. Coordinates of X and Y of the tag: style. posleft and style. postop

* Ie: Yes.
* FF: No.
* Common: object. offsetleft and object. offsettop.

5. the height and width of the form

* Ie: Document. Body. offsetwidth and document. Body. offsetheight. Note: The page must have a body tag.
* FF: window. innerwidth and window. innerhegiht, and document.doc umentelement. clientwidth and document.doc umentelement. clientheight.
* General: Document. Body. clientwidth and document. Body. clientheight.

6. Add events

* Ie: element. attachevent ("onclick", func );.
* FF: element. addeventlistener ("click", func, true ).
* Generic: element. onclick = func. Although the onclick event can be used, the effect of onclick is different from that of the above two methods. onclick only executes one process, while attachevent and addeventlistener execute one process list, that is, multiple processes. For example, both func1 and func2 are executed in element. attachevent ("onclick", func1); element. attachevent ("onclick", func2.

7. Custom Attributes of tags

* Ie: If you define an attribute value for the label div1, you can obtain this value using div1.value and div1 ["value.
* FF: div1.value and div1 ["value"] cannot be used.
* Common: div1.getattribute ("value ").

8. parent node, child node, and delete node

* Ie: parentelement, parement. Children, element. romovenode (true ).
* FF: parentnode, parentnode. childnodes, node. parentnode. removechild (node ).

9. Drawing

* Ie: VML.
* FF: SVG.

10. CSS: transparent

* Ie: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
* FF: opacity: 0.6.

11. CSS: rounded corner

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

12. CSS: double-line concave and convex 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 ;.

13. Others (to be sorted)
Firefox: When div is set to margin-left and margin-right is set to auto, it is already centered. IE is not working.

When setting text-align for Firefox: body, you must set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

Firefox: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

Firefox: supported! Important, ie is ignored, available! Important sets a special style for Firefox

Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.

Cursor: pointer can display the cursor finger shape in IE Firefox at the same time, hand only ie Can

Firefox: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.

Small set of XHTML + CSS compatibility Solutions
There are many advantages to using the XHTML + CSS architecture, but there are also some problems. Whether it is because I am not skilled or have unclear ideas, I will first write some of the problems I encountered below:
1. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:
Div {margin: 30px! Important; margin: 28px;} note that the order of the two margin cannot be reversed! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:
If Div {maring: 30px; margin: 28px} is repeatedly defined, it is executed according to the last one. Therefore, you cannot write only margin: xxpx! Important;
Http://bbs.itokit.com/professional Web Development Forum
2. the box interpretations of ie5 and IE6 are inconsistent. Div {width: 300px; margin: 0 10px 0 10px;} Div width is interpreted as 300px-10px (right filling) -10px (left filled) the final Div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, you can make the following changes:
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}

3. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first.
Ul {margin: 0; padding: 0;} solves most problems.

4. the language attribute is not supported in xhtml1.1 for scripts, you only need to change Code to

supplement:
IE6 has a margin double outer patch bug and requires CSS. hack
Firefox is more compliant with the standard, so pay special attention to floating and floating clearance, While IE has better fault tolerance
when the height in IE is smaller than a certain value (probably 18px, it may not be displayed on the page, and overflow: hidden is required; Firefox can fully reflect the height;
when IE6 IE7 ff2 is installed, it is probably different to write about one or two pages. In fact, it is not difficult to
block ie browsers (that is, it is not displayed in IE)
*: lang (zh) Select {Font: 12px! Important;}/* FF dedicated */
select: Empty {Font: 12px! Important;}/* safari visible */
here, select is a selection character, which can be changed as needed. The second sentence is unique to the Safari browser on Mac.

only IE7 identification
* + HTML {...}
this hack can be used only for IE7.
IE6 and IE6 identification
* HTML {...}
in this case, many landlords write an Internet Explorer 6 hack. In fact, ie5.x can also identify this hack. Not recognized by other browsers.
html/**/> body select {......} Web Teaching Network
This sentence serves the same purpose as the previous one.
only IE6 does not recognize
select {display/* IE6 does not recognize */: none;}
here, a property and value are separated by CSS annotations, the stream is displayed before the colon.
only IE6 and ie5 are not recognized
select/**/{display/* IE6, ie5 is not recognized */: none ;}
the difference here is that a CSS comment is added between the separator and curly braces.
only ie5 does not recognize
select/* ie5 does not recognize */{display: none ;}
the comment of the attribute area is removed from the previous sentence. Only ie5 does not recognize
box model solution
selct {width: ie5.x width; voice-family: ""} "; voice-family: Inherit; width: correct width;}
the box model clearing method is not passed! Important. This should be clear.
clear floating
select: After {content :". "; display: block; Height: 0; clear: Both; visibility: hidden;}
in Firefox, when all sub-levels are floating, then, the height of the parent level cannot fully cover the entire child level. Then, we can use this floating hack to define the parent level.

ellipsis
select {-o-text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}
it is a good technique to cut out more text and end it with a ellipsis. But Firefox does not currently support it.