Frequently asked questions in JavaScript
1. Collection Class object Problem
Many collection class objects in existing code use (), IE can accept, Firefox can not.
WORKAROUND: Use [] as the subscript operation instead. For example: Document.forms ("FormName") instead
JS code document.forms["FormName"]; Another example: Document.getelementsbyname ("InputName") (1); Change to Document.getelementsbyname ("InputName") [1];
document.forms["FormName"];
Another example:
document.getelementsbyname ("InputName") (1);
Change to
document.getelementsbyname ("InputName") [1];
2. Div object
In IE, div objects can be used directly using IDs as object variable names. Not in Firefox.
DivId.style.display = "None";
Workaround: document.getElementById ("divID"). Style.display = "None";
PS: The object of the method, whether or not a Div object, should use the getElementById method.
3. About Frame
Existing problem: In IE can use Window.testframe to obtain this FRAME,MF not
Workaround: The main difference between Firefox and IE in the use of frame is:
If the following attributes are written in the frame label:
Then IE can access the Window object for this frame by ID or name
MF can only access the window object of this frame through name
For example, if the frame tag is written in the HTM inside the top-level window, you can access the
IE:window.top.frameId or Window.top.frameName to access this window object
Firefox: This is the only way to access this window object Window.top.frameName
In addition, Window.top.document.getElementById ("Frameid") can be used in both MF and IE to access the frame label
And you can switch the contents of the frame by window.top.document.getElementById ("Testframe"). src = ' xx.htm '.
You can also switch the contents of a frame by window.top.frameName.location = ' xx.htm '
4. Window
Existing problem: In IE can open modal and modeless window through ShowModalDialog and showModelessDialog, but Firefox does not support.
WORKAROUND: Open the new window directly using the window.open (Pageurl,name,parameters) method.
If you need to pass parameters, you can use a frame or an IFRAME.
5. When defining various object variable names in JS, use IDs as much as possible, avoiding the use of name.
In IE, the ID of an HTML object can be used directly as the subordinate object variable name of document. Not in Firefox, so try to use IDs when you normally use them, and avoid using only name instead of IDs.
6. document.all
Firefox can be compatible with document.all, but generates a warning. You can use getElementById ("*") or Getelementbytagname ("*") to replace
However, for attributes such as document.all.length, they are completely incompatible. Try not to use the document.all attribute.
7. Parentelement
Using parentelement and ParentNode to get the parent node is supported in IE.
And Firefox can only use parentnode.
8. Event
The windows.event is not supported by the Consortium
For example, in IE:
JS code function Onmenuclick () {collapsemenu (event.srcelement); }
function Onmenuclick () {
collapsemenu (event.srcelement);
}
Work properly. But in Firefox, it's changed to:
JS code function Onmenuclick (evt) {if (evt = null) EVT = window.event;//For IE var srcelement = Evt.srceleme Nt? Evt.srcElement:evt.target; IE uses srcelement, while Firefox uses target Collapsemenu (srcelement);
function Onmenuclick (evt) {
if (evt = null)
evt = window.event;//For IE
var srcelement = evt.srcelement? evt. SrcElement:evt.target;
IE uses srcelement, while Firefox uses target
collapsemenu (srcelement);
9. Event.x and Event.y issues
In IE, the event object has an X, y attribute, which is not in Firefox.
Workaround:
In Firefox, the equivalent of Event.x is Event.pagex. But Event.pagex ie did not.
Therefore, the use of Event.clientx instead of event.x. This variable is also available in IE.
There is a subtle difference between event.clientx and Event.pagex (when the entire page has a scroll bar),
But most of the time it is equivalent.
If you want to be exactly the same, you can be a little more troublesome:
JS code MX = event.x? Event.x:event.pagex;
MX = Event.x? Event.x:event.pagex;
And then use MX instead of event.x.
10. Obtaining an object with a idname string
In IE, the use of eval (idname) can get the HTML object ID idname, not in Firefox.
Workaround: Replace eval (idname) with getElementById (Idname).
nodename and TagName issues
In Firefox, all nodes have nodename values, but textnode do not have tagName values.
The use of nodename in IE can sometimes be problematic.
Workaround:
Use TagName, but you should detect if it is empty.
type attribute for input
IE under the Input.type property is read-only, but Firefox can be modified.
16. Custom Properties
In MF, a property defined by itself must be getattribute () to obtain
And IE can go directly through "." Operator gets.
17.const Problem
The Const keyword cannot be used in IE. Such as
Const CONSTVAR = 32;
This is a syntax error in IE.
Workaround:
Do not use const instead of Var.
The Body object
The body of the Firefox body tag is not fully read in the browser before the existence, and IE must be completely read into the body after the existence.
An analysis of the IMG object ALT and Title
Alt: When the photo does not exist or the load error prompts,
Title: Tip Description of the photo,
In IE, if there is no definition of title,alt can also be used as an IMG tip, but in Firefox, both are completely in accordance with the definition of the standard
When you define an IMG object, it is best to write all the Alt and title objects to ensure that you are working properly in all browsers
20.childNodes acquired node
ChildNodes the meaning of the subscript is different in IE and Firefox, Firefox uses the DOM specification, ChildNodes inserts a blank text node.
When you obtain a child node, you can generally bypass the problem by Node.getelementsbytagname ().
21.removeNode ()
Firefox nodes do not have Removenode method, you must use the following methods
JS Code node.parentNode.removeChild (node);
Node.parentNode.removeChild (node);
22.innerText
IE support, Firefox does not support
The content text in FF is set with the Textconent property.
the difference between XMLHTTP
The creation method in Firefox is:
JS Code xmlhttp=new XMLHttpRequest ()
Xmlhttp=new XMLHttpRequest ()
And in IE, for:
JS Code xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")
the src refresh Problem of img
In IE can be used to refresh the picture, but not under Firefox. The main problem is caching, which is solved by adding a random number after the address:
JS code myimg.src=this.src+ '? ' +math.random ();
myimg.src=this.src+ '? ' +math.random ();
setattribute () Setting Property issues
IE many properties can not be set with setattribute, but Firefox, such as: JS code thediv.setattribute (' style ', ' color:red '); Instead: Object.style.cssText = ' color:red; '; SetAttribute (' class ', ' StyleClass ')///instead: setattribute (' className ', ' styleClass '); Obj.setattribute (' onclick ', ' funcitonname (); '); Instead: Obj.onclick=function () {fucntionname ();};
Thediv.setattribute (' style ', ' color:red ');
instead:
object.style.cssText = ' color:red; ';
SetAttribute (' class ', ' StyleClass ')
///instead:
setattribute (' className ', ' styleClass ');
Obj.setattribute (' onclick ', ' funcitonname (); ');
Instead:
obj.onclick=function () {fucntionname ();};
... Wait a minute
-----------------------------------------------------------------------------------------
The difference between IE and Firefox in parsing CSS
1. The analysis of the height
IE: Will vary according to the height of the content, including undefined height of the picture content, even if the definition of height, when the content exceeds the height, will use the actual height
Firefox: When no height is defined, if the content includes the content of the picture, Firefox's high resolution is based on the printing standards, which will cause and the actual content is highly incompatible with the situation; When the height is defined, but the content exceeds the height, the content goes beyond the defined height, but the style used by the zone does not change , resulting in style dislocation.
Conclusion: Everyone can determine the height of the content of the best definition of height, if there is no way to define the height, it is best not to use the border style, otherwise the style will certainly appear confusing.
3. Layout issues
When you are writing CSS, especially with float:left (or right) to arrange a picture, you will find in Firefox inside normal and IE there are problems. Whether you use margin:0, or border:0 to restrain, it is no avail.
In fact, there is another problem, ie for the space processing, Firefox is ignored and ie for blocks and blocks between the space is handled. That is to say a div after the end of a div write, the middle do not have a carriage return or space. Otherwise, there may be problems, such as the deviation of 3px, and the reason is difficult to find.
It was unfortunate that I ran into the problem of multiple IMG tags attached and then defined the Float:left, hoping that the images could be connected. But the result is normal inside Firefox and every img shown in IE is 3px apart. I have no effect on removing all the spaces between the labels.
Later, the solution is to set Li on the outside of IMG and define margin:0 for Li, which solves the display deviation of IE and Firefox. IE for some models of interpretation will produce a lot of error problems, only a lot of try to find out why.
This is just a few simple differences, in the layout and CSS design can be considered, but the most effective and simple to solve the compatibility problem or use Table table, the table in the compatibility of a good performance.
4. Mouse Style
Firefox does not support hand, but IE supports pointer
Workaround: Unify the use of pointer
5. Padding question
padding 5px 4px 3px 1px Firefox can not be explained in shorthand,
Must be changed into padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
6. Elimination of UL, OL and other lists of indentation
Eliminate the UL, OL and other lists of indentation style should be written: list-style:none;margin:0px;padding:0px;
Where the margin property is effective for IE, the padding attribute is effective for Firefox
7. CSS Transparent
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
8. css Rounded Corners
IE: Round 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;.
9. CSS double-line 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;
10. Filters
Filters are supported in IE and not supported in Firefox.
11. Prohibit selection of Web page content:
Generally used in IE js:obj.onselectstart=function () {return false;};
and Firefox with Css:-moz-user-select:none;
-----------------------------------------------------------------------------------------
Collected and collated by Ham using Google. If you have better resources, please share.
If there are other places where IE is different from FF, or what is wrong with the code, please point out that I will correct it in time.
http://www.iteye.com/topic/204040
