JavaScript compatibility and CSS compatibility summary

JavaScript section

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

2. Collection Class object issues
Problem:
Many collection class objects in the code are used (), IE can accept, FF cannot
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 FF event can only be used on the spot where the incident occurred, and this issue is temporarily unresolved. The event can be passed to the function to work around:
OnMouseMove = "functionname (event)"
function functionname (e) {
E = e | | window.event;
......
}

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

5. Problem with Idname string to get Object
Problem:
In IE, an HTML object with an ID of idname can be obtained using eval ("Idname") and cannot be in FF
Workaround:
Use getElementById ("Idname") instead of eval ("Idname")

6. The variable name has the same problem as an HTML object ID
Problem:
In FF, because the object ID is not the name of the HTML object, you can use the same variable name as the HTML object ID, ie cannot
Workaround:
When declaring variables, add var to avoid ambiguity, which can be run in IE
It is best not to take the same variable name as the HTML object ID to reduce the error

7. Event.x and EVENT.Y issues
Problem:
In IE, the event object has an X, y attribute and FF has no
Workaround:
In FF, the equivalent of Event.x is Event.pagex, but Event.pagex ie does not have
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 that the scroll bar
To be exactly the same, you can:
MX = Event.x? Event.x:event.pagex;
and 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 an element
In FF, the attributes that you define must be getattribute () to obtain

10. No parentelement,parement.children in FF and Parentnode,parentnode.childnodes
Problem:
ChildNodes the meaning of the subscript is different in IE and FF, the childNodes of FF will be inserted into the blank text node
Workaround:
You can avoid this problem by Node.getelementsbytagname ().
Problem:
When nodes in HTML are missing, IE and FF interpret parentnode differently, for example:
<form>
< table>
< input/>
</table>
</form>
The value of Input.parentnode in FF is form, while the value of Input.parentnode in IE is null node
Problem:
The FF node itself has no RemoveNode method
Workaround:
You must use the following method Node.parentNode.removeChild (node)

One. Const issues
Problem:
The Const keyword cannot be used in IE
Workaround:
Replace with Var

. Body Object
The body of the FF exists before the body tag is fully read by the browser, and IE must be present only after the body is fully read into it.
This will result in a blank page appendchild on the body when the document is not loaded at the end of IE.
Workaround:
All the action of inserting a node on the body, all after the onload

URL encoding
Problem:
General FF does not recognize the & in JS
Workaround:
In JS If you write a URL directly & do not write &

NodeName and TagName issues
Problem:
In FF, all nodes have nodeName values, but textnode have no tagName value, there is a problem with the use of nodeName in IE
Workaround:
Use TagName, but you should detect if it is empty

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

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

17. Calling the sub-frame or other elements in the frame
Frame problem The former designer of Traditional Chinese network has done a detailed explanation, simply speaking, in IE, you can use the following methods to get the value of the child element
document.getElementById ("FrameName"). (document.) ElementName
window.frames["FrameName"].elementname
In FF you need to change to the following form to perform, IE compatible:
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 Obj.style.height = Imgobj.height + "px";

InnerText's problems
Problem:
InnerText works in IE, but InnerText is not available in Firefox.
Workaround:
Use textcontent instead of innertext in non-IE browsers

Event.srcelement and Event.toelement issues
Problem:
Under IE, the even object has a srcelement attribute, but no target property; Under Firefox, the even object has the target property, but there is no srcelement property
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 to prohibit, ie with JS Forbidden
Workaround:
IE:obj.onselectstart = function () {return false;}
FF:-moz-user-select:none;

22. Capturing events
Problem:
FF has 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 content, ie is centered by default, and FF is left justified by default
You can try adding code Margin:auto

2. Height issues
Two up or nested div, above the div set height (height), if the actual content of the div is greater than the set height, there will be two div overlap phenomenon in the FF, but in IE, the following Div will automatically give space to the above Div
Therefore, in order to avoid overlapping layers, height must be controlled properly, or simply do not write height, let him automatically adjust, better method is height:100%;
But when the first element in this div is float, you need to add a sink empty div at the end of the Div block, and 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;
Don't want to be floated by float, write clear:both in Div;

4. Double the distance generated by IE floating margin
#box {
Float:left;
width:100px;
margin:0 0 0 100px; In this case, IE will produce 200px distance
Display:inline; Make floating Ignore
}

5. Padding issues
After FF sets padding, the div will increase the height and width, but IE will not (* Standard XHTML1.0 definition DTD seems to be the same)
Height control is appropriate, or try to use height:100%;
Width reduction using padding
However, according to the actual 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 on the y-axis when Div is nested
The distance from the Sub div on the Y axis of the FF to the parent Div is the parent padding + child marign
The distance from the y-axis Sub-div to the parent div in IE is a large one in the parent padding and the child marign.
When the parent padding=0 and border=0 on the y axis of the FF, the distance of the child div to the parent div is 0, and the child marign acts outside the parent Div

7. Padding,marign,height,width's idiot-solving skills
Attention is a skill, not a 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 ">
< HTML xmlns= "http://www.w3.org/1999/xhtml" >
High as far as possible with padding, with margin,height as far as possible to fill up 100%, the parent height has fixed value child height without 100%, the child is all floating when the bottom of the empty Clear:both div
Width as far as possible with margin, cautious use padding,width calculate the actual need to subtract padding

List class

1. The UL tag has padding value in FF, and only margin in IE is value
First define the UL {margin:0;padding:0;}

2. UL and ol list indent issues
To eliminate the indentation of UL, OL and other lists, the style should be written as: {list-style:none;margin:0px;padding:0px;}

Display class

1. Display:block,inline of two elements
Display:block; You 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 table
Display:block block elements, elements are characterized by:
Always start on a new line;
Height, row height and top and bottom margin can be controlled;
The width defaults to 100% of its container unless a width is set
<div>,<p>,Display:inline is the element that displays elements as inline elements, which are characterized by:
And the other elements are on one line;
Height, row height and top and bottom margin can not be changed;
Width is the width of the text or picture, and it cannot be changed.
<span>,<a>,<label>,<input>,,<strong> and <em> are examples of inline elements

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

background, picture class

1. Background display problem
Pay attention to all width,height properties

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 is best to write all two, and put the opacity attribute below

JavaScript compatibility and CSS compatibility summary