IE, Safari, Chrome browser JavaScript compatibility transformation Summary __java

1.1 Browser Kernel Differences
Introduction to 1.2 Safari and Chrome browser
Safari and Chrome, a browser for Apple's Mac OS system, a Google-developed browser that uses the same kernel WebKit, about WebKit, has the following profile.
WebKit is an open source browser Web page typesetting engine, with the corresponding engine gecko (Mozilla,firefox, etc.) and Trident (also known as the typesetting engine used by Mshtml,ie). WebKit is also the name of the Apple Mac OS X System engine framework version, mainly for Safari,dashboard,mail and some other Mac OS X programs. WebKit's WebCore typesetting engine and Jscore engine came from KDE's khtml and KJS, which, when compared with Gecko and Khtml, still chose the latter because of its clear source structure and extremely fast rendering speed.
Currently using the WebKit engine browser mainly: Safari (apple), Midori,chrome (Google produced) and so on.
1.3. Summary of transformation issues
In the transformation process of testing and troubleshooting, summed up the common ground has the following dozens of points:
1.2.1 Document.formName.item ("itemname") question
Note: Under IE, you can use Document.formName.item ("ItemName") or document.formname.item["ItemName" or document.formname.elements[" ElementName "];
The standard of the consortium can only use the document.formname.elements["ElementName"].
Workaround: Unify the use of document.formname.elements["ElementName"].

1.2.2 Collection Class object problem
Note: IE, you can use () or [] get the Collection class object; Safari and Chrome, you can only use [] to get collection class objects.
WORKAROUND: Use [] to get collection class objects uniformly.

1.2.3 Various style descriptions need to be strictly case
Note: IE, a variety of CSS attribute case requirements are not strict, can operate correctly.
Safari and Chrome have been under the condition that the case problem cannot be resolved correctly, it is recommended that the case be strictly case-sensitive.
Workaround: Unify strictly according to CSS attribute size.

1.2.4 Custom Attribute Issues
Note: Under IE, you can get the custom attribute by using the method of obtaining the General property, or you can use GetAttribute () to get the definition attribute. Under Safari and Chrome, you can only use getattribute () to get a defined attribute.
Workaround: The unification is obtained from the defined attribute through GetAttribute ().
Example: <input type= ' text ' id= ' comdiv ' paic= ' it ' style= ' display:block ' style= ' "font-size:20pt ', ' size= ' ' 4 '/>
IE can be obtained using ELEMENT.PAIC, and only element. getattribute (' Paic ') is required under Safari and chrome.

You cannot have more than one style description in the 1.2.5 element
Description: Under IE, an element can be defined several times style, Safari and chrome, if there are multiple descriptions can not be effective. Workaround: Only one style description exists in the unified element ...
Example: <input type= ' text ' id= ' comdiv ' style= ' the Display:block ' style= ' font-size:20pt '; ' size= ' 4 '/>
In IE, the two style definitions in the example are loaded, and only the first style will be loaded under Safari and chrome.

1.2.6 eval ("idname") problem
Description: In Safari, Chrome and IE, you can use either eval ("Idname") or getElementById ("Idname") to obtain an HTML object with an ID of idname; Firefox can only use getElementById ("Idname") to get an HTML object with an ID of idname.
Workaround: Unify the getElementById ("Idname") to get the HTML object with the ID idname.

1.2.7 variable name is the same as an HTML object ID
Description: Under IE, Safari and Chrome, the ID of HTML object can be used directly as the subordinate object variable name of document; Firefox is not.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take a variable name with the same HTML object ID to reduce the error; When declaring a variable, add var to avoid ambiguity.

1.2.8 How to get objects
The ID and name of the HTML object are found in IE using getElementById, and name is not found in Safari and Chrome, and getElementById and getelementsbyname must be used strictly.
Workaround:
ID use getElementById
Name uses Getelementsbyname

1.2.9 Input.type Attribute problem
Note: IE under the Input.type property is read-only, but in Safari and Chrome Input.type properties for read and write.
<input type= ' text ' id= ' comdiv ' size= ' 4 '/>
Safari and chrome, you can use Comdiv.type = ' button ' to modify type types.

1.2.10 modal and non-modal window problems
Note: Under IE, modal and modeless windows can be opened by ShowModalDialog and showModelessDialog. In Safari and Chrome, you can't.
WORKAROUND: Open the new window directly using the window.open (Pageurl,name,parameters) method.
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. For example: var parwin = Window.opener; ParWin.document.getElementById ("aqing"). Value = "aqing";

1.2.11 Cursor:hand and Cursor:pointer
Firefox does not support hand, but IE, Safari and chrome support pointer
Workaround: Unify the use of pointer

1.2.12 the Options collection operation for select
Enumeration elements can be SelectName.options.item () in addition to [], and SelectName.options.length, Selectname.options.add/remove can be used on both browsers. Notice that the value element is assigned after add, otherwise it will fail.