IE and Firefox firefox in JS, CSS compatibility differences

1.firefox cannot support innertext.
Firefox supports innerHTML but does not support innertext, it supports textcontent to implement innertext, but it also retains the extra space by default. If you do not need to textcontent, if the string contains no HTML code can also be replaced with innerHTML.
2. Prohibit the selection of Web content:
In IE, generally with js:obj.onselectstart=function () {return false;}
and Firefox uses Css:-moz-user-select:none
3. Filter support (example: Transparent filter):
IE:filter:alpha (opacity=10);
firefox:-moz-opacity:.10;
4. Capturing events:
IE:obj.setCapture (), Obj.releasecapture ()
Firefox:document.addEventListener ("MouseMove", mousemovefunction,true);
Document.removeeventlistener ("MouseMove", mousemovefunction,true);
5. Get the mouse position:
IE:event.clientX, Event.clienty
Firefox: event function needs to pass event object
Obj.onmousemove=function (EV) {
X= Ev.pagex; Y=ev.pagey;
}
Boundary problems for elements such as 6.DIV:
For example: Set a div's css::{width:100px;height:100px;border: #000000 1pxsolid;}
ie: width of div (including border width): height of 100px,div (including border width): 100px;
And the width of the firefox:div (including the border width): 102px,div height (including the border width): 102px;
So in this compatible with IE and Firefox drag windows, in the JS and CSS to write a bit of brain, give everyone two tips
One. Determine the browser type:
var isie=document.all? True:false;
I wrote a variable, if support document.all syntax so isie=true, otherwise isie=false
Two. CSS processing under different browsers:
You can use!important to prioritize CSS statements (Firefox support only)
For example: {border-width:0px!important;border-width:1px;}
In Firefox, this element is no border, under IE, the width of the border is 1px
1.document.formname.item ("ItemName") issues
Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formname.elements["ElementName"];firefox, Use only document.formname.elements["ElementName"].
Workaround: Use document.formname.elements["elementname" uniformly.
2. Collection Class object issues
Problem description: Under IE, you can use () or [] get the Collection class object; Firefox can only use [] to get the collection class object.
WORKAROUND: Use [] uniformly to get the collection class object.
3. Custom attribute Issues
Problem description: Under IE, you can get custom properties by using the method of getting the general properties, or you can use GetAttribute () to obtain the custom attributes, and under Firefox, you can only use getattribute () to derive the custom attributes.
Workaround: Unify through getattribute () to get the custom attributes.
4.eval_r ("Idname") issues
Problem description: Under IE, you can use Eval_r ("Idname") or getElementById ("Idname") to obtain an HTML object with an ID of idname; under Firefox, you can use only getElementById ("Idname" ) to obtain an HTML object with ID idname.
Workaround: Unify the getElementById ("Idname") to obtain an HTML object with ID idname.
5. The variable name has the same problem as an HTML object ID
Problem description: Under IE, the ID of the HTML object can be used directly as the subordinate object variable name of document, Firefox can not be used, Firefox, under the same name as the HTML object ID, ie cannot.
Workaround: Use document.getelementbyidx_xx_x ("Idname") instead of document.idname. It is best not to take the same variable name as the HTML object ID to reduce the error, and when declaring the variable, add the var keyword to avoid ambiguity.
6.const problem
Problem Description: Under Firefox, you can use the Const keyword or the var keyword to define constants; Under IE, you can only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.
7.input.type Property Issues
Problem Description: The Input.type property under IE is read-only, but the Input.type property in Firefox is read-write.
WORKAROUND: Do not modify the Input.type property. If you have to modify it, you can hide the original input and then insert a new INPUT element in the same location.
8.window.event problems
Problem Description: Window.event can only run under IE, but not under Firefox, because Firefox event can only be used on the spot where events occur.
Workaround: Add an event parameter to the function that occurred on the incident, and use Var myevent =evt?evt in the function body (assuming the parameter is EVT): (Window.event?window.event:null)
Example: <input type= "button" onclick= "DoSomething (event)"/>
<script language= "JavaScript" >
function DoSomething (evt) {
var myevent = evt?evt: (window.event?window.event:null)
...
}
9.event.x and EVENT.Y problems
Problem description: Under IE, even object has X, Y property, but no Pagex, Pagey property; Under Firefox, the even object has Pagex, Pagey properties, but no X, y properties.
Workaround: var myx = event.x? Event.x:event.pagex; var MyY = event.y? event.y:event.pagey;
If you consider question 8th, use MyEvent instead of event.
10.event.srcelement problems
Problem description: Under IE, even object has Srcelement property, but no target property; Under Firefox, even object has the target property, but there is no srcelement attribute.
Workaround: Use Srcobj = event.srcelement? Event.srcElement:event.target;
If you consider question 8th, use MyEvent instead of event.
11.window.location.href problems
Problem Description: Under IE or firefox2.0.x, you can use Window.location or window.location.href;firefox1.5.x, only use window.location.
WORKAROUND: Use window.location instead of window.location.href. Of course, you can also consider using the Location.replace () method.
12. Modal and non-modal window problems
Problem description: Under IE, the modal and non-modal windows can be opened via ShowModalDialog and showModelessDialog; Firefox can't.
WORKAROUND: Open a new window directly using window.open (pageurl,name,parameters).
If you need to pass parameters from a child window back to the parent window, you can use Window.opener in the child window to access the parent window. If the parent window is required to control the Subwindow, use Varsubwindow = window.open (pageurl,name,parameters); To get the newly opened window object.
13.frame and IFRAME Issues
Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Accessing the Frame object
IE: Use Window.frameid or window.framename to access the frame object;
Firefox: Use Window.framename to access the frame object;
Workaround: Use window.document.getElementByIdx_xx_x ("Frameid") to access the frame object uniformly;
(2) Toggle frame content
You can use Window.document.getElementByIdx_xx_x ("Frameid") in both IE and Firefox. src = "xxx.html" or window.frameName.location = " xxx.html "To switch the contents of the frame;
If you need to pass the parameters in the frame back to the parent window, you can use the parent keyword in the frame to access it.
14.body Loading problems
Problem Description: The body object of Firefox exists before the body tag is fully read by the browser, while the body object of IE must exist after the body tag is fully read into the browser.
[note] This issue has not been verified and will be modified after verification.
[note] proven, IE6, Opera9, and FireFox2 do not have the above problem, the simple JS script can access all the objects and elements that have been loaded before the script, even if this element has not been loaded complete.
15. Event Delegation Method
Problem description: Under IE, use document.body.onload = inject; where Functioninject () has been implemented before, in Firefox, using Document.body.onload =inject ();
Workaround: Use document.body.onload=new Function uniformly (' inject () '); or document.body.onload = function () {}
Note function and Function differences
16. The difference between the access parent element
Problem description: Under IE, use obj.parentelement or Obj.parentnode to access the parent node of obj; under Firefox, use Obj.parentnode to access the parent node of obj.
Workaround: Because both Firefox and IE support the DOM, the Obj.parentnode is used uniformly to access the parent node of obj.
17.cursor:hand VS Cursor:pointer
Problem Description: Firefox does not support hand, but IE supports pointer, both are hand-shaped instructions.
Workaround: Use pointer uniformly.
18.innerText problem.
Problem description: InnerText in IE can work normally, but innertext in Firefox but not.
WORKAROUND: Use textcontent instead of innertext in non-IE browsers.
Example:
if (Navigator.appName.indexOf ("explorer") >-1) {
Document.getelementbyidx_xx_x (' element '). InnerText = "my text";
} else{
Document.getelementbyidx_xx_x (' element '). Textcontent = "MyText";
}
[note] InnerHTML at the same time by IE, Firefox and other browser support, and other, such as outerhtml only supported by IE, preferably not.
19. Object width and Height assignment problem
Problem Description: A statement similar to obj.style.height = Imgobj.height in Firefox is invalid.
Workaround: Unify the use of Obj.style.height = Imgobj.height + ' px ';
Table Operation Issues
Problem description: IE, Firefox and other browsers for the table label operation is different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, using the AppendChild method is not used.
Workaround:
Append a blank line to the table:
var row = Otable.insertrow (-1);
var cell = document.createelement_x_x ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);
[note] Since I rarely use JS direct operation of the table, this problem has not been met. It is recommended to use the JS frameset to manipulate table, such as jquery.
UL and ol list indent issues
Eliminate the UL, OL and other list of indentation, the style should be written as: list-style:none;margin:0px;padding:0px;
Where the margin attribute is valid for IE, the Padding property is valid for Firefox. ← This sentence is wrong, see the details ↓
[note] This issue has not been verified and will be modified after verification.
[note] experience, in IE, set margin:0px can remove the list of the upper and lower left and right indent, blank and list number or dot, set padding has no effect on the style; in Firefox, setting margin:0px can only remove the upper and lower spaces, set padding : Only the left and right indents can be removed after 0px, and List-style:none must be set to remove the list number or dot. In other words, in IE, only set margin:0px can achieve the final effect, and in Firefox must be set margin:0px, padding:0px and list-style:none three items to achieve the final effect.
CSS Transparency Issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] It is best to write all two, and put the opacity attribute below.
The CSS fillet problem
Ie:ie7 The following versions do not support rounded corners.
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;.
[note] The fillet problem is a classic problem in CSS, and it is recommended to use the jquery frameset to set the fillet, leaving these complex questions to others.
There are too many questions about CSS, and even the same CSS definitions are not displayed in different page standards. A development recommendation is that the page is written using standard DHTML standards, with less table,css defined as much as possible in accordance with the standard DOM, while taking into account the main browsers such as IE, Firefox, opera and so on. BTW, in many cases, the FF and Opera CSS interpretation standards are closer to the CSS standard, but also more normative.

CSS processing in different browsers:
You can use!important to prioritize CSS statements (Firefox support only)
For example: {border-width:0px!important;border-width:1px;}
In Firefox, this element is no border, under IE, the width of the border is 1px

Several XHTML and normal state of JS, CSS differences
Adding this code at the beginning of the page is the so-called XHTML standard <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Several different points under the XHTML standard:
1.document.documentelement and Document.body
Be sure to use the CSS in your code when you set the page: Document.documentelement
For example: document.documentelement.style.overflow= ' hidden ';
Overflow-x, overflow-y These two sub-coordinate attributes XHTML is not supported;
2. Use Document.documentelement to obtain the window area of the page and to get the scroll bar offset distance
That is, these four attributes (ClientWidth, ClientHeight, ScrollLeft, scrolltop) must be used Document.documentelement
But Document.body.appendChild () and Document.body.removeChild () are available, and with Document.documentElement.appendChild () and Document.documentElement.removeChild () instead will error;
Summarize clientwidth, ClientHeight, ScrollLeft, ScrollTop and Document.documentElement.style only with document.documentelement
3. After adding this standard, IE's border problem also changed, now and Firefox tend to be consistent, is not this is the advantage of XHTML-cross-browser standards
mentioned above:
Set the Css::{width:100px;height:100px;border of a div: #000000 1pxsolid;}
IE (normal): width of div (including border width): height of 100px,div (including border width): 100px;
Firefox (normal):: Div width (including border width): 102px,div height (including border width): 102px;
After adding XHTML standard (IE and Firefox hit and ^_^):
IE (XHTML): div width (including border width): height of 102px,div (including border width): 102px;
Firefox (XHTML):: Div width (including border width): height of 102px,div (including border width): 102px;

Invalid commit in 1.firefox

* Description: In the project, using JS to write a commit (like An.submit (), where an in the table sole name), but run in Firefox, the point button is not valid
* Problem: JS in Firefox, when there is no submit button in the form, JS's submit will be invalid
* Resolution: To change the button type to submit, if you do not want to display this button, you can use CSS to hide it:

<input type= ' Submit ' style= ' Display:none '/>
Display modal dialog box in 2.firefox

* Description: Want to display a modal dialog box in Firefox
* Problem: Firefox in JS does not window.showmodaldialog this method, it seems only Microsoft has!
* Resolution: Use the following method to indicate:

window.open (' openwin.html ', ' newwin ', ' modal=yes,width=200,height=200,resizable=no,scrollbars=no ');

Just add Modal=yes to the third parameter.
Result passing of JS dialog box in 3.firefox

* Description: There is a requirement to return the results of user actions in the dialog box to the parent window, which can be represented by Window.returnvaule under Windows.
* Problem: Firefox does not have window.returnvaule this attribute
* FIX: In Firefox, get the "reference" of its parent window, then find the component to update the value, set the value. The presentation method is as follows:

If there is a form in the parent window, there is a id=page text in the list. So in the pop-up window you can do this to him: parent.opener.document.form.page.value=newvalues, so that you can complete the popup window to the parent window to cover the value of the need.

Window.event
Window.event can be used in IE
An event in FF can only be used in the field where the event occurred, and may be rewritten as an events = function
function SomeMethod (evt) {
EVT = evt? EVT: (window.event window.event:null);
alert (EVT);
}
Example: <inputonclick=somemethod (Event) >

4,event.x and EVENT.Y problems
In IE, the event object has x, Y property
FF, available Event.clientx, Event.clienty override (ie also has this attribute)
Also available: MX = event.x? Event.x:event.pagex;
5, Operation Frame
You can use Windows in IE. FrameName get the FRAME,FF.
Window.top.document.getElementByIdx_xx_x ("Frameid") can be used in FF to access frame
Note: Both IE and FF can be toggled by window.top.document.getElementByIdx_xx_x ("frame"). src = ' somefile.htm ' to toggle the contents of the Frame, You can also switch the contents of a frame by window.top.frameName.location = ' somefile.htm '
6, call ShowModalDialog
In IE, you can use ShowModalDialog a subwindow and get the return value.
There is no showmodaldialog in FF, but it can be implemented with window.open.
For example:
The following code is in the main.cfm file:
function Showitemlist (OBJ) {
if (document.all) {//ie
Varreturnvalue=window.showmodaldialog ("Itemlist.cfm? Id=341〃, "Self", "dialogwidth:500px;status:false");
if (TypeOf (returnvalue)! = ' undefined ') {
Obj.value=returnvalue;
}
}
else{
Varsubwin=window.open (item.cfm?id=341, ' newwin ', ' modal=yes,width=500px ');
}
}
Function ReturnValue (returnvalue) {
obj=document.getelementbyidx_xx_x (' elementname ');
Obj.value=returnvalue;
}
If you need to get the return value. You need to use the window.open parameter Modal=yes, and you must pass the value (Window.opener) to the parent window in the child window.
For example, add the following code to the SUBWIN.CFM:
function Returnthisvalue () {
Window.opener.ReturnValue (document.getelementbyidx_xx_x (' SelectedItem '). Value);
}

The difference between IE and Firefox in parsing CSS
Analysis of the height
IE: Will vary according to the height of the content, including the undefined height of the picture content, even if the height is defined, when the content exceeds the height, the actual height will be used

Firefox: When there is no height defined, if the content includes the content of the picture, MF's height resolution is based on the printing standard, which will result in a situation where the actual content height is not met; When the height is defined, but the content exceeds the height, the content exceeds the defined height, but the style used in the area does not change. Causes the style dislocation.

Conclusion: It is best to define height when you can determine the height of the content, if there is no way to define the height, it is best not to use the border style, otherwise the style will definitely appear chaotic!

IMG Object ALT and Title parsing
Alt: Prompt when the photo does not exist or the load is wrong;

Title: Tip Description of the photo.

In IE, if no title,alt is defined, it can also be used as an IMG tip, but in MF the two are used exactly as defined in the standard

Conclusion: When you define an IMG object, you end up writing both the ALT and title objects to ensure proper use in all browsers.

Other details of the difference

When you are writing CSS, especially with float:left (or right) to arrange a picture, you will find in Firefox normal and IE inside there is a problem. Whether you use margin:0, or border:0 to restrain, it is useless.

In fact, there is another problem, ie for the processing of space, Firefox is ignored and ie for blocks and blocks between the space is processed. That is to say a div after the end of a div to write, do not have a carriage return or space in the middle. Otherwise there may be problems, such as 3px deviations, and the reason is hard to find.

It was unfortunate that I had this problem again, multiple IMG tags attached, and then the definition of float:left, I hope these pictures can be linked together. But the results are normal in Firefox and every img shown in IE is 3px apart. I have no effect on removing the spaces between the tabs.

Later, the solution is to set up an IMG outside the Li, and the Li definition margin:0, which solves the IE and Firefox display deviation. IE's interpretation of some models can cause many error problems, and only a lot of attempts can be found.

This is just a few simple differences, in the layout and CSS design can be considered in a comprehensive, but the most effective and simple to solve the compatibility problem or table table, the table in terms of compatibility has a good performance.

NodeName and TagName issues
(1) Existing problems:
In MF, all nodes have nodeName values, but textnode do not have tagName values. In IE,
The use of nodeName is as good as
There is a problem (the situation is not tested, but my IE has died several times).
(2) Workaround:
Use TagName, but you should detect whether it is empty.

====================================================================================

Recently found in IE using the normal click event, in Firefox can not be used, nor error, that is, does not work, the original Firefox does not have this event, need to deal with their own, the code is as follows:

function DoClick (obj) {
if (document.all) {//if supported, is IE, the default has this event,
Obj.click ();
} else {//or else you can add a
var evt = document.createevent ("mouseevents");
Evt.initevent ("Click", True, true);
Obj.dispatchevent (EVT);
}

}

Calling method: DoClick (Control);

initevent (String eventtypearg,boolean Canbubblearg,boolean cancelablearg)

initevent method for initializing via dispatchevent method Assignment event , although it can be called more than once (if necessary) at that stage. If it is called more than once, the last call takes precedence. If a subclass of initevent the value specified in the method, all other properties remain unchanged.

parameter:

eventtypearg /code>-Specifies the event type. This type can be any of the event types currently defined in this specification, or a new event type. The string must be an XML name. Any new event type must not start with the uppercase, lowercase, or mixed-case versions of the string "DOM". The prefix is reserved for subsequent DOM event sets. It is also highly recommended that third parties adding their own events use their own prefixes to avoid confusion and reduce the likelihood of conflicts with other new events.

canbubblearg -Specifies whether the event can be bubble.

cancelablearg -Specifies whether the default action of the event can be blocked