Summary on compatibility between Javascript and CSS browsers

This is a small document I have summarized for many years. The main content is the Javascript and CSS browser compatibility summary. I recently saw someone asking about browser compatibility issues and contributed to them.

Not necessarily all, and some may be inaccurate. For example, the new IE8 and Chrome are not involved much. Although some recently developed projects are compatible with IE8 and Chrome, but I did not come and summarized it, and I forgot... Khan. Let's make improvements together.

Javascript Section

1. document. form. item Problems
Problem:
The Code contains statements such as document. formName. item ("itemName") and cannot be run in FF.
Solution:
Use document. formName. elements ["elementName"]

2. Collection class Object Problems
Problem:
Many collection class objects in the Code are used (), which is acceptable to IE and cannot be used by FF.
Solution:
Use [] as the subscript, for example:
Document. getElementsByName ("inputName") (1) changed to document. getElementsByName ("inputName") [1]

3. window. event
Problem:
Windows. event cannot be run on FF.
Solution:
FF event can only be used in the event. This problem cannot be solved. You can transfer the event to the function to solve the problem:
OnMouseMove = "functionName (event )"
Function functionName (e ){
E = e | window. event;
......
}

4. Question about the id of an HTML object as the object name
Problem:
In IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but cannot be used in FF.
Solution:
Standard getElementById ("idName") is used when object variables are used ")

5. The problem of getting an object using the idName string
Problem:
In IE, eval ("idName") can be used to obtain the HTML object with id as idName. In FF
Solution:
Use getElementById ("idName") to replace eval ("idName ")

6. The variable name is the same as the id of an HTML object.
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.
Solution:
When declaring variables, add var to avoid ambiguity, so that it can run normally in IE.
It is best not to use the same variable name as the HTML Object id to reduce errors.

7. event. x and event. y
Problem:
In IE, the event object has the x, y attributes, and FF does not exist.
Solution:
In FF, event. x is equivalent to event. pageX, but event. pageX IE does not
Therefore, event. clientX is used to replace event. x. This variable is also available in IE.
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;
Use mX instead of event. x

8. About frame
Problem:
In IE, the frame can be obtained using window. testFrame, but not in FF.
Solution:
Registry.top.doc ument. getElementById ("testFrame"). src = 'xx.htm'
Window. top. frameName. location = 'xx.htm'

9. Get element attributes
In FF, the defined attributes must be obtained by getAttribute ().

10. In FF, parentElement and parement. children are not included, but parentNode and parentNode. childNodes are used.
Problem:
The subtopics of childNodes are different in IE and FF. blank text nodes are inserted in childNodes of FF.
Solution:
You can use node. getElementsByTagName () to avoid this problem.
Problem:
When a node in html is missing, IE and FF have different interpretations of parentNode, for example:
<Form>
<Table>
<Input/>
</Table>
</Form>
In FF, the value of input. parentNode is form, while that of input. parentNode in IE is empty.
Problem:
The node in FF does not have the removeNode method.
Solution:
You must use the following method: node. parentNode. removeChild (node)

11. const Problems
Problem:
You cannot use the const keyword in IE.
Solution:
Replace with var

12. body object
FF's body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.
This will occur in IE. when the document is not loaded, the appendChild on the body will have a blank page.
Solution:
All actions to insert nodes to the body are performed after onload.

13. url encoding
Problem:
Generally, FF cannot identify &
Solution:
Write the url directly in js. Do not write it &

14. nodeName and tagName Problems
Problem:
In FF, all nodes have a nodeName value, but textNode does not have a tagName value. In IE, nodeName usage is incorrect.
Solution:
Use tagName, but check whether it is empty

15. Element attributes
The input. type attribute in IE is read-only, but can be modified in FF.

16. document. getElementsByName () and document. all [name] Problems
Problem:
In IE, neither getElementsByName () nor document. all [name] can be used to obtain the div element.
Whether there are other undesirable elements is unknown (this issue is still controversial and is still under study)

17. Questions about calling sub-frameworks or elements in other frameworks
The front-end designer of the traditional Chinese Text network has explained the frame problem in detail. To put it simply, in IE, you can use the following method to obtain the values of sub-elements.
Document. getElementById ("frameName"). (document.) elementName
Window. frames ["frameName"]. elementName
In FF, it needs to be executed in the following format, which is compatible with IE:
Window. frames ["frameName" 2.16.content?#doc ument. elementName
Window. frames ["frameName" 2.16.doc ument. elementName

18. Assignment of object width and height
Problem:
The statement similar to obj. style. height = imgObj. height in FireFox is invalid.
Solution:
Use obj. style. height = imgObj. height + "px ";

19. innerText Problems
Problem:
InnerText works normally in IE, but innerText does not work in FireFox
Solution:
Use textContent instead of innerText in non-ie browsers

20. event. srcElement and event. toElement
Problem:
In IE, the even object has the srcElement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcElement attribute.
Solution:
Var source = e.tar get | e. srcElement;
Var target = e. relatedTarget | e. toElement;

21. Prohibit the selection of webpage content
Problem:
FF is forbidden by CSS, whereas IE is forbidden by JS.
Solution:
IE: obj. onselectstart = function () {return false ;}
FF:-moz-user-select: none;

22. Capture events
Problem:
FF has no setCapture () or releaseCapture () Methods
Solution:
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. center problem
Content in div, IE is centered by default, and FF is left aligned by default
You can try to add the code margin: auto

2. High issues
The above div sets the height. If the actual content in the div is greater than the height, the two div overlaps in FF; however, in IE, the following div automatically gives space to the above div
Therefore, to avoid overlapping layers, you must properly control the height, or simply do not write the height so that it can be automatically adjusted. The better way is to set the height to 100%;
However, when the first-level elements in the div are float, you need to add an empty div at the end of the div block to close and front. 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;
If you do not want to be float, Write clear: both in the div;

4. Double distance produced by IE floating margin
# Box {
Float: left;
Width: 100px;
Margin: 0 0 0 100px; // in this case, IE will generate a PX distance.
Display: inline; // ignore floating
}

5. padding Problems
After FF sets padding, div will increase the height and width, but IE will not (* The standard XHTML1.0 definition dtd seems to be consistent)
Proper height control, or try to use height: 100%;
Use padding to reduce the width
However, based on actual experience, the padding of FF and IE is not much different. The actual width of div is = width + padding, so div writes both width and padding, width is defined by subtracting the actual width from the padding.

6. padding and marign on y axis during div nesting
In FF, the distance between the child div and the parent div on the y axis is parent padding + child marign.
In IE, the distance between the child div and the parent div on the y axis is a big one in the parent padding and the Child marign.
When the parent padding is 0 on the y axis of FF and the border is 0, the distance between the child div and the parent div is 0, and the Child marign acts outside the parent div.

7. padding, marign, height, and width
Note that it is a skill, not a method:
Write the Standard Header
<! 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/5o/xhtml">
Use padding as much as possible, use margin with caution, and add 100% for height as much as possible. The parent-level height has a fixed value. The child-level height does not need 100%. When the child-level is full, fill in an empty clear: both div at the bottom.
Use margin as much as possible for width, use padding with caution, and calculate the actual width minus the padding.

List class

1. ul labels have padding values by default in FF, while in IE, only margin has values.
First define ul {margin: 0; padding: 0 ;}

2. Questions about ul and ol list indentation
When the indentation of ul and ol lists is eliminated, the style should be written as: {list-style: none; margin: 0px; padding: 0px ;}

Display class

1. display: block, inline two elements
Display: block; // you can simulate embedded elements as block elements.
Display: inline; // implement the same row Arrangement
Display: table; // for FF, simulating the table Effect
Display: block element, which has the following features:
Always starts on a new line;
Height, row height, and top and bottom margins can be controlled;
The default width is 100% of its container, unless a width is set.
<Div>, <p>, Display: inline is to display the element as a row element. The element features:
And other elements are on one line;
High, the Row Height and top and bottom margins cannot be changed;
The width of a text or image cannot be changed.
<Span>, <a>, <label>, <input>, , <strong>, and <em> are examples of inline elements.

2. Mouse-finger display
Cursor: pointer;

Background and Image

1. background display problems
Complete the width and height attributes.

2. Background transparency
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 );
IE: filter: alpha (opacity = 10 );
FF: ops: 0.6;
FF:-moz-opacity: 0.10;
It is best to write both of them and put the opacity attribute below