Compatibility between ie and Firefox

1. document. form. item Problems
(1) existing problems:
Many statements such as document. formName. item ("itemName") exist in the existing code and cannot be run in Firefox.
(2) solution:
Use document. formName. elements ["elementName"]

2. Collection class Object Problems
(1) existing problems:
In the existing Code, many collection class objects are used (), which is acceptable to IE and cannot be used by Firefox.
(2) solution:
Use [] as the subscript operation. For example, change document. forms ("formName") to document. forms ["formName"].
For example, change document. getElementsByName ("inputName") (1) to document. getElementsByName ("inputName") [1]

3. window. event
(1) existing problems:
Window. event cannot be run on Firefox
(2) solution:
The event of Firefox can only be used in the event. This problem cannot be solved for the moment. This can be changed as follows:
Original code (run in IE): <br/> <input type = "button" name = "someButton" value = "Submit" onclick = "javascript: gotoSubmit () "/> <br/>... <br/> <script language = "javascript"> <br/> function gotoSubmit () {<br/>... <br/> alert (window. event); // use window. event <br/>... <br/>}< br/> </script>

New Code (run in IE and Firefox): <input type = "button" name = "someButton" value = "Submit" onclick = "javascript: gotoSubmit (event) "/> <br/>... <br/> <script language = "javascript"> <br/> function gotoSubmit (evt) {<br/> evt = evt? Evt: (window. event? Window. event: null); <br/>... <br/> alert (evt); // use evt <br/>... <br/>}< br/> </script>
In addition, if the first line of the new Code is not modified, it is the same as the old code (that is, the gotoSubmit call does not provide a parameter), it can only be run in IE, but no error occurs. Therefore, the tpl part of this solution is still compatible with the old code.

4. Question about the id of an HTML object as the object name
(1) Existing Problems
In IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document. Not in Firefox.
(2) Solution
Use getElementById ("idName") instead of idName as the object variable.

5. The problem of getting an object using the idName string
(1) Existing Problems
In IE, eval (idName) can be used to obtain the HTML object with id as idName, which cannot be used in Firefox.
(2) Solution
Use getElementById (idName) instead of eval (idName ).

6. The variable name is the same as the id of an HTML object.
(1) Existing Problems
In Firefox, because the Object id is not the name of the HTML object, you can use the same variable name as the HTML Object id, which can be in IE.
(2) Solution
When declaring variables, add var to avoid ambiguity, so that it can run normally in IE.
In addition, it is best not to take the same variable name as the HTML Object id to reduce errors.

7. event. x and event. y
(1) Existing Problems
In IE, the event object has the x and y attributes, and Firefox does not.
(2) Solution
In Firefox, event. x is equivalent to event. pageX. But event. pageX IE does not.
Therefore, event. clientX is used instead of event. x. This variable is also available in IE.
Event. clientX is slightly different from event. pageX (when the page has a scroll bar), but most of the time it is equivalent.

If it is the same, it may be a little troublesome:
MX = event. x? Event. x: event. pageX;
Use mX instead of event. x
(3) Others
Event. layerX is available in both IE and Firefox. There is no difference in the specific significance of this feature.

8. About frame
(1) Existing Problems
In IE, you can use window. testFrame to obtain the frame, but not in Firefox.
(2) Solution
The main difference between Firefox and ie in frame usage is:
If the following attributes are written in the frame tag:
<Frame src = "xx.htm" id = "frameId" name = "frameName"/>
Then ie can access the window object corresponding to this frame through id or name.
Firefox can only access the window object corresponding to this frame through name.
For example, if the above frame label is written in the htm in the top window, you can access
Ie: window. top. frameId or window. top. frameName to access this window object
Firefox: only window. top. frameName can access this window object.

In addition, both Firefox and ie can use zookeeper top.doc ument. getElementById ("frameId") to access the frame tag.
In addition, you can switch the frame content through the parameter top.doc ument. getElementById ("testFrame"). src = 'xx.htm '.
You can also switch the frame content through window. top. frameName. location = 'xx.htm '.
For details about frame and window, see the 'window and framework' article in bbs.
And the tests under the/test/js/test_frame/directory

9. In Firefox, the property defined by myself must be obtained by getAttribute ().

10. Use parentElement parement. children in Firefox
ParentNode. childNodes
The meanings of childNodes are different from those of Firefox. Firefox inserts blank text nodes in childNodes using DOM specifications.
You can avoid this problem by using node. getElementsByTagName.
When the html node is missing, IE and Firefox have different interpretations of parentNode, for example
<Form>
<Table>
<Input/>
</Table>
</Form>
In Firefox, the value of input. parentNode is form, while that of input. parentNode in IE is empty.

The node in Firefox does not have the removeNode method. You must use the following method: node. parentNode. removeChild (node)

11. const Problems
(1) existing problems:
You cannot use the const keyword in IE. For example, const constVar = 32; in IE, This Is A syntax error.
(2) solution:
Use var instead of const.

12. body object
Firefox's body exists before the body label is fully read by the browser, While IE exists only after the body is fully read.

13. url encoding
In js, if the url is written, write directly & do not write & amp; for example, var url = 'xx. jsp? ObjectName = xx & amp; objectEvent = XXX ';
Frm. action = url, so it is very likely that the url will not be properly displayed, so that the parameter is not correctly transmitted to the server.
Generally, the server reports that the error parameter is not found.
Of course, if it is an exception in tpl, because tpl complies with the xml specification and requires & writes as & amp;
Firefox cannot recognize & amp; in js;

14. nodeName and tagName Problems
(1) existing problems:
In Firefox, all nodes have a nodeName value, but textNode does not have a tagName value. In IE, nodeName usage seems to be
There is a problem (the test is not performed, but my IE has been killed several times ).
(2) solution:
Use tagName, but check whether it is empty.

15. Element attributes
The input. type attribute in IE is read-only, but can be modified in Firefox.

16. document. getElementsByName () and document. all [name] Problems
(1) existing problems:
In IE, neither getElementsByName () nor document. all [name] can be used to obtain the div element (whether there are other elements that cannot be retrieved is unknown ).

17. You need to change the css with the simplest move of the mouse over the hand.

Cursor: pointer;/* ff does not support cursor: hand */dw8. The hand attribute is not automatically displayed. The standard is pointer.

18. ff does not support filters. The most common translucent filter is not supported.

Filter: Alpha (Opacity = 50);/* for IE */
Opacity:. 5;/* for Firefox */

Style = "-moz-opacity: 0.5; filter: alpha (opacity = 50); cursor: hand;" onmouseover = "this. style. Your opacity = 1;
This. filters. alpha. opacity = 100 "onmouseout =" this. style. Required opacity = 0.5;
This. filters. alpha. opacity = 50"

19. ff does not support expression. For example, to remove the border of a link, you must write different css codes.

A, area {blr: expression (this. onFocus = this. blur ()}/* for IE */
: Focus {outline: none;}/* for Firefox */

20. ff does not support the color settings of the div scroll bar. Currently, there is no good replacement method.

. Contendiv {
Position: absolute; left: 0px; top: 10px; width: 580px; height: 135px;
Line-height: 120%; text-align: left; font-family: ""; word-break: break-all; color: #6D6E71;
OVERFLOW-Y: auto; OVERFLOW-X: no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6; SCROLLBAR-FACE-COLOR: # F6F6F6; SCROLLBAR-SHADOW-COLOR: # F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR: # F6F6F6; SCROLLBAR-3DLIGHT-COLOR: # F6F6F6; SCROLLBAR-HIGHLIGHT-COLOR: # F6F6F6;
}

This is totally ineffective in ff.

21. ie is displayed on a horizontal line below the text

Border-width: 0px 0px 1px 0px; go to the text in ff. (I still cannot find a solution after checking the manual ~~ It turns out that the fault tolerance capability of ff is too bad, which is caused by the following width: 186px; height: 0px; width and height. In fact, a: haver has inherited the attributes of the superior, you only need to define different styles. It seems that ff helps to produce standardized and simplified web pages and has a deeper understanding of css, which is a good help for providing css)

. Onelinksdiv a: hover {
Display: block; border-style: solid; color: # ff0000; border-width: 0px 0px 1px 0px;
/*
Display: block; border-style: solid; border-width: 0px 0px 1px 0px;
Width: 186px; height: 0px; color: # ff0000; font-size: 14px; text-align: right;
*/
}

// The following statement is normal in ie, but it is wrong in ff.

. Onelinksdiv a: hover {
Display: block; border: # ff0000 solid; border-width: 0px 0px 1px 0px;
Width: 186px; height: 0px; color: # ff0000; font-size: 14px; text-align: right;
}

References:

Border-width: border-top-width border-right-width border-bottom-width border-left-width;

P # fourborders
{
Border-width: thick medium thin 12px;
}

If four values are defined, the four values are the width values of the top, right, bottom, and left border respectively (the width values are traversed in a counter-clockwise order starting from the top border ).

It is equivalent to the following definition.

P # fourborders
{
Border-top-width: thick;
Border-right-width: medium;
Border-bottom-width: thin;
Border-left-width: 12px;
}

22. ff does not support the <body scroll = "no"> scroll attribute

Overflow: hidden must be defined, and must be under the html Tag, not under the body

Html {
Overflow: hidden;
}

23. ff does not support data island binding

<Xml id = "news" src = "news. xml "> </xml> you can load data in ie, but Firefox cannot load the data. In the beginning, you may think that the line cannot be loaded because there are too many lines of text in the content, however, only a few words are left before deletion.

24. style = "word-break: break-all" when the content in the cell page on the webpage exceeds one line, the line feed style defined in IE can be used normally, but it cannot be supported in firefox. style = "word-break: break-all" is the IE proprietary attribute Extended by MS and has not become W3C standard. Therefore, Firefox cannot support it. However, MS has submitted it to W3C, which can be seen in W3C's CSS3 candidate solutions. I hope this property will be supported by Firefox after it is finalized by W3C as the CSS3 standard. Before that, you can try
Style = "table-layout: fixed; word-wrap: break-word" (when it is in English, it cannot wrap normally)

25. Currently, FF2.0 does not support IE's name anchor point.

This method is not supported: <a href = "###" onclick = "history. go (-1)"> go back </a>
Originally, according to W3C syntax, the <a> tag always searches for the href address and redirects to it. Now the onclick event conflicts with the address.

To make Firefox compatible with some IE element attributes, I accidentally found Firefox sensitive to spaces:
<A onclick = "window. location. href = 'faq. php? Page = messages # 2' "> // contains spaces, which are used by the anchor.
<A onclick = "window. location. href = 'faq. php? Page = messages # 2' "> // no space, no effect on the anchor

The anchor writing method is very exquisite. For example, <a name = #1>, Firefox does not support anchor. You must add id = #1.
When static data is referenced on the same page, it must be written as follows: <a href = "#1"> </a>, <a href = "static.html #1"> </a>, use JS for dynamic pages

After all, considering the compatibility of the mouse style and browser:
<A href = "###" onclick = ""> // incompatible
<A href = "javascript:;" onclick = ""> // incompatible
<A href = "javascript: function ();"> // No {...}, which is an invalid script.
<A style = "cursor: hand" onclick = ""> // users who have not taken care of the custom system mouse style
<A href = "javascript: onclick ='' "> // the status bar is displayed. How long is the href displayed?
<A href = # onclick = ""> //

26. ff Firefox does not support the document. all attribute,Document. getElementById ('idname') must be used ');

The following shows my animation switching effect. It works normally in ie and does not move in Firefox. After modification, you can switch the image but the effect will disappear. The reason is that Firefox does not support filter, so it has to use a translucent div.

/*
Company page
*/
Function playcompanyimg ()
{

Window. setInterval ('changecompanyimg (); ', interval );
}
Function changecompanyimg ()
{
/*
Firefox does not support the document. all attribute. You must use document. getElementById ('idname ');
*/
// If (document. all)
//{

/**
The following two sentences are the code for switching the background image before switching the effect. You need to set global variables for number, image, and idtemp.
*/
Number = Math. floor (Math. random () * image. length );
Idtemp. src = image [number];
// Alert (number + "ii" + idtemp. src)
/**
The following two statements are used to achieve the slide switching effect:
*/
// Alert (do_transition );
// Document. all. companyimg. style. filter = "progid: DXImageTransform. Microsoft. Fade (duration = 2, overwriting = 0.4 )";
/*
Document. all. companyimg. style. filter = "progid: DXImageTransform. Microsoft. Fade (duration = 1, overlap = 1 )";
Document. all. companyimg. filters [0]. Apply ();
Document. all. companyimg. filters [0]. Play ();
*/
Var companyimgidtmep = document. getElementById ('companymg ');
Companyimgidtmep. style. filter = "progid: DXImageTransform. Microsoft. Fade (duration = 1, overlap = 1 )";
Companyimgidtmep. filters [0]. Apply ();
Companyimgidtmep. filters [0]. Play ();
//}
}

Reference: CORE: FILTER: revealTrans (duration = 1, transition = 23); one ie filter,

Although other non-IE browsers do not support this filter, But they support transparent filters, you can try it out. IE will continue to use this effect, instead of using transparent filters in IE browsers:

Style. opacity
Opacity = 0.5 CSS3

Style. shortopacity
-Moz-opacity: equivalent to the above filter in 0.5 Mozilla, this filter applies to Netscape.

Style. KHTMLOpacity
-Khtml-opacity: transparent filter in Safari 0.5.

IE:
Obj. filters. alpha. opacity

To meizz (plum blossom snow)
Actually, I thought about your problem. But transparent opacity is not a gradient process.
Generally, this type of image over-effect lasts for a maximum of one second, and a maximum of two seconds of duration = 2.
It took more than two seconds to take the lead.
Implement in 2 seconds
G_img.style.filter = "alpha (opacity =" + I + ")" Transparency changes are cumbersome.
Use window. setInterval to change the I value, and call dozens or even hundreds of times window. setInterval.
To see the effect.
In this case, I don't think I will lose it. It's for special effects.

Another consideration is that, after all, there are few non-ie browsers. Even if there are no excessive image effects under ff, there is actually nothing,
It is still very smooth, but I just can't see the beauty in ie.

27. The onclick event of The Link under ff does not work.

<Div id = "bigwhatwedo"> <a href = "javascript: onclick = display ('whatwedo ') "target =" "> What Do We Do </a> </div> there is no problem in ie, and no response is returned when you click ff. I tried multiple times and changed it to onclick = "display ('whatwedo ')". Later, I checked multiple times and found that the search still could not find the path, finally, use the usual method-step by step alert (); to see the effect, the original fucking id value is wrong, But the strange thing is that there is no relationship under ie? Is the error tolerant content of ie too strong or is the fault tolerant content of Firefox too bad? However, I still like Firefox's rigor and standards. You can find a lot of deep things. Haha.

28. div positioning in ff cannot be initialized through js

The value must be set first and the measurement unit top: 80px; left: 212px;

29. ff cannot use the. click (); Method to open the link, finally temporarily solved

<Div> <a href = "#" onclick = "test1 (2)" id = "a3_a"> hello </a> </div>
<Div>
<A href = "" onclick = "test2 (1)" id = "b3"> hello2 </a> </div>
<Div> <a href = "javascript: onclick = test2 (1)" id = "b3"> hello3 </a> trigger events in href = "javascript: onclick = test2 (1) "ff is invalid </div>
<Div onclick = "test2 (1)" id = "b3"> hello3 </div>
<Script language = "javascript">
<! --
Function test1 (num)
{
Window. alert (num );
}
Function test2 (num)
{
Var aaa_a = document. getElementById ("a3_a ");
If (document. all) {// if (getOs () = "MSIE") {// IE Processing
Aaa_a.click ();
}
Else
{
Var evt = document. createEvent ("MouseEvents ");
Evt. initEvent ("click", true, true );
Aaa_a.dispatchEvent (evt );
}
}

/*

Determine the browser type

*/
Function getOs ()
{
Var OsObject = "";
If (navigator. userAgent. indexOf ("MSIE")> 0 ){
Return "MSIE ";
}
If (isFirefox = navigator. userAgent. indexOf ("Firefox")> 0 ){
Return "Firefox ";
}
If (isSafari = navigator. userAgent. indexOf ("Safari")> 0 ){
Return "Safari ";
}
If (isCamino = navigator. userAgent. indexOf ("Camino")> 0 ){
Return "Camino ";
}
If (isMozilla = navigator. userAgent. indexOf ("Gecko/")> 0 ){
Return "Gecko ";
}

}

// --> </Script>

<! -- Because the link here is the iframe of the index, href = "#" cannot be displayed normally in ie,
Firefox does not support opening the first link by using href = "javascript: onclick = display ('whatwedo ')". Firefox must use onclick = "display ('whoweare ')"
I thought there were a lot of people using Firefox, but according to the statistical analysis of the website, Firefox only had a poor 3.18%, but it really took a lot of effort to be compatible with his standards! However, standardization is conducive to future maintenance and expansion, and is conducive to constant technical prompts.
-->

30. OVERFLOW-Y: auto; OVERFLOW-X: hidden; no can be used in ie to hide, but must be used in ff

-------------------------

To sum up, there are currently 10 incompatibility issues that have not been resolved:

1. ff does not support the color settings of the div scroll bar. There is no good replacement method yet. It is not solved on many standard websites.

2. ff does not support data island binding <xml id = "news" src = "news. xml "> </xml> you can load data in ie, but Firefox cannot load the data. In the beginning, you may think that the line cannot be loaded because there are too many lines of text in the content, however, only a few words are left before deletion. I checked it with w3c code detection software. It turns out that the custom xml tag is not passed, so Firefox does not recognize it.

3. Firefox does not support filter filters, so it cannot achieve the effect of switching between images. It can only be set through transparency, but it is very troublesome (this is not implemented currently)