Summary of JavaScript Browser compatibility code

Summary of Web page effects browser compatibility code

Not necessarily all, and some may not be accurate, such as the new IE8, chrome, etc. are not too much involved, although some recent projects have been compatible with IE8, chrome and so on, but did not come and summed up, and then forget ... Sweat. Let's slowly improve together.

JavaScript section

1. Document.form.item question
Problem:
A statement such as Document.formName.item ("ItemName") exists in the code and cannot be run under FF
Workaround:
Switch to document.formname.elements["ElementName"]

2. Collection Class object problem
Problem:
Many collection class objects in the code use (), IE can accept, FF can not
Workaround:
Instead, use [] as the subscript operation, for example:
Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]

3. window.event
Problem:
Unable to run on FF using window.event
Workaround:
The event in FF can only be used on the spot where the incident occurred, and this issue cannot be resolved temporarily. The event can be uploaded to the function to work around it:
OnMouseMove = "functionname (event)"
function functionname (e) {
E = e | | window.event;
......
}

4. The ID of an HTML object as an object name problem
Problem:
In IE, the ID of an HTML object can be used directly as the subordinate object variable name of document, and in FF it cannot be
Workaround:
Use object variables all with standard getElementById ("Idname")

5. Obtaining an object with a idname string
Problem:
In IE, you can use eval ("Idname") to get an HTML object with an ID of idname, which in FF cannot be
Workaround:
Replace eval ("Idname") with getElementById ("Idname")

6. Variable name and an HTML object ID the same problem
Problem:
In FF, because the object ID is not the name of an HTML object, you can use the same variable name as the HTML object ID, ie cannot
Workaround:
In the declaration of variables, all add var to avoid ambiguity, so that in IE also normal operation
It is best not to take variable names that are the same as HTML object IDs to reduce errors

7. Event.x and EVENT.Y issues
Problem:
In IE, the event object has a X,y attribute, and there is nothing in FF
Workaround:
In FF, the equivalent to Event.x is Event.pagex, but Event.pagex ie does not
Therefore, the use of event.clientx instead of event.x, in IE also has this variable
The subtle difference between Event.clientx and Event.pagex is the scroll bar.
To be exactly the same, you can do this:
MX = Event.x? Event.x:event.pagex;
And then use MX instead of event.x.

8. About Frame
Problem:
In IE, you can use Window.testframe to get the frame,ff.
Workaround:
Window.top.document.getElementById ("Testframe"). src = ' xx.htm '
window.top.frameName.location = ' xx.htm '

9. Get the attributes of the element
In FF, the attribute that you define must be getattribute () to obtain

10. No parentelement,parement.children in FF with Parentnode,parentnode.childnodes
Problem:
ChildNodes the meaning of the subscript is different in IE and FF, the childnodes of FF inserts a blank text node
Workaround:
You can avoid this problem by Node.getelementsbytagname ().
Problem:
When the nodes in HTML are missing, IE and FF have different explanations for parentnode, for example:
<form>
<table>
<input/>
</table>
</form>
The value of Input.parentnode in FF is form, and the value of Input.parentnode in IE is an empty node
Problem:
The node in FF itself has no Removenode method
Workaround:
You must use the following method Node.parentNode.removeChild (node)

The const question.
Problem:
You cannot use the const keyword in IE
Workaround:
Replace with Var

A. Body Object
The body of the FF body tag is not fully read by the browser before the existence, and IE must be completely read in the body after the existence of
This will occur in IE, when the document is not loaded, appendchild on the body will appear a blank page problem
Workaround:
Everything on the body insert the action of the node, all in the onload after the

URL encoding
Problem:
General FF does not recognize the & in JS
Workaround:
In JS if the write URL to write directly & do not write &

NodeName and TagName issues
Problem:
In FF, all nodes have nodename value, but Textnode has no tagName value, in IE, the use of nodename is problematic
Workaround:
Use TagName, but should detect whether it is empty

15. Element attributes
IE under the Input.type property is read-only, but can be modified under FF

Problems with Document.getelementsbyname () and Document.all[name]
Problem:
In IE, Getelementsbyname (), Document.all[name] cannot be used to obtain DIV elements
Whether there are other elements that cannot be taken is not known (the issue is debatable and is still under study)

17. Calling the elements in a child frame or other frame
In IE, you can use the following method to get the value in a child element
document.getElementById ("FrameName"). (document.) ElementName
window.frames["FrameName"].elementname
In FF, it needs to be executed in the following form, which is compatible with IE:
window.frames["FrameName"].contentwindow.document.elementname
window.frames["FrameName"].document.elementname

18. Object width and Height assignment problem
Problem:
Invalid statement in Firefox similar to obj.style.height = Imgobj.height
Workaround:
Unified use of Obj.style.height = Imgobj.height + "px";

Question of innertext
Problem:
InnerText in IE can work, but innertext in Firefox but not
Workaround:
Use textcontent instead of innertext in non-IE browsers

Event.srcelement and Event.toelement issues
Problem:
IE, the even object has a srcelement attribute, but no target attribute; Firefox, even object has target attribute, but no srcelement attribute
Workaround:
var Source = E.target | | E.srcelement;
var target = E.relatedtarget | | E.toelement;

21. Prohibit selection of Web page content
Problem:
FF need to use CSS prohibit, ie with JS prohibit
Workaround:
IE:obj.onselectstart = function () {return false;}
FF:-moz-user-select:none;

22. Capturing events
Problem:
FF no setcapture (), ReleaseCapture () method
Workaround:
Ie:
Obj.setcapture ();
Obj.releasecapture ();
Ff:
Window.captureevents (event.mousemove| Event.mouseup);
Window.releaseevents (event.mousemove| Event.mouseup);
if (!window.captureevents) {
O.setcapture ();
}else {
Window.captureevents (event.mousemove| Event.mouseup);
}
if (!window.captureevents) {
O.releasecapture ();
}else {
Window.releaseevents (event.mousemove| Event.mouseup);
}

CSS Section

Div class

1. Centering problem
Div in the content, ie defaults to center, and FF defaults to left-aligned
You can try adding code Margin:auto

2. Height problem
Two or nested div, above the div set height, if the actual content of the div is greater than the set height, there will be two div overlapping in FF phenomenon; but in IE, the following Div will automatically give space to the above Div
So in order to avoid overlapping layer, height must be controlled properly, or simply do not write height, so that he automatically adjust, the better method is height:100%;
But when this div inside level elements are float, you need to at the end of the Div block, closed and before adding a bottom of the empty Div, the corresponding CSS is:
. float_bottom {Clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden}

3. Clear:both;
Do not want to be float float, just write clear:both in Div;

4. The double distance produced by IE floating margin
#box {
Float:left;
width:100px;
margin:0 0 0 100px; In this case, IE will produce a distance of 200px
Display:inline; Make floating Ignore
}

5. Padding question
FF sets padding, div increases height and width, but IE does not (* Standard XHTML1.0 definition DTD seems consistent)
Highly controlled, or try to use height:100%;
Width reduction using padding
However, according to practical experience, the general FF and IE padding will not be much different, the actual div width = width + padding, so div write full width and padding,width with the actual desired width minus padding definition

6. Padding and marign problems on y-axis when Div is nested
The distance of the y-axis div to the parent div in FF is the parent padding + sub Marign
ie in the y-axis of the child div to the parent div distance of the father padding and son marign in the big One
FF in the y-axis when the parent padding=0 and border=0, the child div to the parent div distance of 0, the child Marign action to the parent div outside

7. Padding,marign,height,width's Fool-solving skills
Attention is skill, not method:
Write the standard head.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
High as far as possible with padding, careful with margin,height as far as possible to make up 100%, the parent height has a fixed value of the child height not 100%, the child is all floating when the bottom fill an empty clear:both div
Width as far as possible with margin, careful to use padding,width calculate the actual to subtract padding

List class

1. The UL label in FF has the padding value in the default, but in IE only margin has the value
First define UL {margin:0;padding:0;}

2. UL and ol list indent problem
Elimination of UL, OL and other lists of indentation, style should be written: {list-style:none;margin:0px;padding:0px;}

Show class

1. Display:block,inline two elements
Display:block; Can simulate an inline element as a block element
Display:inline; The effect of implementing the same row arrangement
display:table; For FF, simulating the effect of a table
Display:block block element, the element is characterized by:
Always start on a new line;
Height, row height and top and bottom margins are controllable;
The width defaults to 100% of its container, unless a width is set
<div>,<p>,Display:inline is to display elements as inline elements, and the elements are characterized by:
and other elements are on one line;
High, the row height and the top and the bottom distance cannot be changed;
The width is the width of its text or picture, and cannot be changed.
<span>,<a>,<label>,<input>,,<strong> and <em> are examples of inline elements

2. Mouse finger-like display
All use the standard writing cursor:pointer;

background, picture class

1. Background display problem
All attention to the Width,height property

2. Background transparency issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60);
IE:filter:alpha (opacity=10);
ff:opacity:0.6;
FF:-moz-opacity:0.10;
It's best to write all two, and put the opacity attribute below