Common compatibility issues between IE and Firefox

　1. document.form.item problem

　(1)Existing problems:

There are many statements like document.formName.item("itemName") in the existing code, which cannot be run under Firefox

　(2)Solution:

Use document.formName.elements["elementName"] instead

　2. Collection object problem

　(1)Existing problems:

　Many collection objects in the existing code use () when accessing them. IE can accept it, but Firefox cannot.

　(2)Solution:

　Use [] as subscript operation instead. Such as:

　document.forms("formName") is changed to document.forms["formName"].

Another example:

　document.getElementsByName("inputName")(1) changed to document.getElementsByName("inputName")[1]

　3. window.event

　(1)Existing problems:

　Using window.event cannot run on Firefox browser

　(2)Solution:

　Firefox’s event can only be used at the scene where the event occurs. This problem cannot be solved yet. You can change it like this:

Original code (can run in IE):

　

...

New code (works in IE and Firefox):

　
...

　In addition, if the first line in the new code does not change and is the same as the old code (that is, the gotoSubmit call does not give parameters), it will still only run in IE, but there will be no error. Therefore, the tpl part of this solution is still compatible with the old code.

　4. The problem of using the id of the HTML object as the object name

　(1)Existing problems

　In IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of document. Not in Firefox.

　(2)Solution

　Use getElementById("idName") instead of idName as an object variable.

　5. Problem with obtaining objects using idName string

　(1)Existing problems

　In IE, you can use eval(idName) to get the HTML object with the id idName, but not in Firefox.

　(2)Solution

　Use getElementById(idName) instead of eval(idName).

　6. The problem that the variable name is the same as the ID of an HTML object

　(1)Existing problems

　In Firefox, because the object id is not used as the name of the HTML object, you can use the same variable name as the HTML object id, which works in IE.

　(2)Solution

　When declaring variables, always add var to avoid ambiguity, so that they can run normally in IE.

In addition, it is best not to use the same variable name as the HTML object id to reduce errors.

7. Event.x and event.y issues

(1)Existing questions

In IE, the event object has x, y attributes, but not in Firefox.

(2)Solution

In Firefox, the equivalent of event.x is event.pageX. But event.pageX is not available in IE. Therefore, event.clientX is used instead of event.x. This variable also exists in IE. There are subtle differences between event.clientX and event.pageX (when the entire page has scroll bars), but they are equivalent most of the time.

If you want it to be exactly the same, you can have a little more trouble: mX = event.x ? event.x : event.pageX; Then use mX instead of event.x

(3)Others

event.layerX exists in IE and Firefox. Whether there is any specific difference has not yet been tested.

8. About frame

(1)Existing questions

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 terms of the use of frames is:

If the following attributes are written in the frame tag:

Then IE can access the window object corresponding to this frame through id or name, while Firefox can only access the window object corresponding to this frame through name. For example, if the above frame tag is written in the htm inside the top window, then you can access IE like this : window.top.frameId or window.top.frameName to access this window object

Firefox: This window object can only be accessed through window.top.frameName

In addition, in both Firefox and IE, you can use window.top.document.getElementById("frameId") to access the frame tag and window.top.document.getElementById("testFrame").src = 'xx.htm' To switch the content of the frame, you can also switch the content of the frame through window.top.frameName.location ='xx.htm'. For descriptions of frame and window, please refer to the 'window and frame' article of bbs and /test/js/test_frame Tests under / directory

9. In Firefox, the attributes you define must be obtained through getAttribute()

10. There is no parentElement parement.children in Firefox but

parentNode parentNode.childNodes The meaning of the subscripts of childNodes is different in IE and Firefox. Firefox uses DOM specifications, and blank text nodes will be inserted into childNodes.

You can generally avoid this problem through node.getElementsByTagName().

When a node is missing in html, IE and Firefox interpret parentNode differently, for example

The value of input.parentNode in Firefox is form, while the value of input.parentNode in IE is an empty node

There is no removeNode method for nodes in Firefox, you must use the following method node.parentNode.removeChild(node)

11.const problem

(1)Existing questions:

The const keyword cannot be used in IE. Such as const constVar = 32; This is a syntax error in IE.

(2)Solution:

Do not use const, use var instead.

12. body object

Firefox’s body exists before the body tag is fully read by the browser, while IE’s body must exist after the body is fully read

13. url encoding

If you write a url in js, write it directly & don’t write it. For example, var url = 'xx.jsp?objectName=xx&objectEvent=xxx'; frm.action = url. Then it is very likely that the url will not be displayed normally and the parameters are incorrect. When transmitted to the server, the server will usually report an error. The parameter is not found. Of course, the exception is if it is in tpl, because tpl conforms to the xml specification and requires & to be written as &. Generally, Firefox cannot recognize & in js.

14. nodeName and tagName problem

(1)Existing questions:

In Firefox, all nodes have nodeName value, but textNode does not have tagName value. In IE, there seems to be a problem with the use of nodeName (the specific situation has not been tested, but my IE has died several times).

(2)Solution:

Use tagName, but should detect if it is empty.

15. Element attributes

The input.type attribute is read-only under IE, but it can be modified under Firefox

16. Problems with document.getElementsByName() and document.all[name]

(1)Existing questions:

In IE, getElementsByName() and document.all[name] cannot be used to obtain div elements (it is not known whether there are other elements that cannot be obtained).

17. The simplest CSS for mouse over hand transformation is going to be changed

cursor:pointer;/*ff does not support cursor:hand*/ The attribute automatically produced under dw8 does not have the attribute hand. The standard one is pointer

18.ff does not support filters. The most common translucency 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.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"

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

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

20.ff does not support the color setting of the div scroll bar, and there is currently no good way to replace it.

.content {
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 has no effect at all in FF.

21.ie, the horizontal line below the text is displayed

border-width: 0px 0px 1px 0px; it goes to the text in ff. (I checked the manual and still couldn’t find a solution. It feels strange~~ It turns out that the fault tolerance of ff is too poor, which is caused by the following width: 186px; height: 0px;. In fact, a:haver has inherited the superior one. Attributes, just define different styles. It seems that ff helps to create standardized and concise web pages. It also 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 writing method is normal under ie, but it is wrong under 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;
}

Related 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, then these four values are the width values of the top, right, bottom, and left borders (starting from the top border and traversing in counterclockwise order).

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 scroll attribute

overflow:hidden must be defined; and it must be under the html tag, not under the body

html{
overflow:hidden;
}

23.ff does not support data island binding

The data can be loaded in IE, but the data cannot be loaded in Firefox. I initially thought it might be because the content line text is too As a result, the line cannot be broken and cannot be loaded, but the same cannot be done after deleting only a few words.

24.style="word-break:break-all"

When the content of the cell in the web page exceeds one line, the line break style defined in the IE browser can be used normally, but it is not supported in Firefox. style="word-break:break-all" is MS The extended IE-specific property has not become a W3C standard, so Firefox does not yet support it. However, MS has submitted it to W3C, and it can also be seen in the W3C's CSS3 candidate plan. I hope Firefox can support this property after it is finalized as a CSS3 standard by the W3C. Before that, you can try it
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

Writing like this is not supported: go back
It turns out that according to W3C syntax, the tag will always search for the href address and jump to it. Now the onclick event conflicts with the ### address.

In order to make Firefox compatible with some element attributes of IE, I accidentally discovered that Firefox is sensitive to spaces:

//With spaces, the anchor point works
//No space, anchor point has no effect
The way to write the anchor point is very particular, such as , Firefox does not support anchor points, so you have to add id=#1
When referencing the same page statically, you must write like this: , will not work*** *Status pages need to use JS

The sequelae are here, considering the mouse style and browser compatibility, I started tossing again:

//Incompatible
//Incompatible
//Without {...}, it is illegal writing of script
// Didn't take care of users who customize the system mouse style
I thought that a lot of people use Firefox, but according to the statistical analysis of the website, Firefox only has a pitiful 3.18%, but it does take a lot of effort to be compatible with its standards! However, standardization is conducive to future maintenance and expansion, and is conducive to continuous reminders of technology.
-->

Question 14: OVERFLOW-Y:auto;OVERFLOW-X:hidden; You can use no to hide in IE, but you must use hidden in FireFox