JAVASCRIPT IE and FF compatible writing record _ Experience Exchange

Source: Internet
Author: User
Tags eval
PNG TransparentAlphaImageLoader
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Enabled=benabled,sizingmethod=ssize,src=surl)

enabled: Options available. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true: Default value. Filter activation. False: Filters are prohibited.
Sizingmethod: Options available. String. Sets or retrieves how a picture of a filter's object is displayed within the bounds of the object container. Crop: Cut the picture to fit the object size. Image: Default value. Increase or decrease the size boundaries of an object to fit the size of the picture. Scale: Scales the picture to fit the object's dimension boundaries.
SRC: Required option. String. Specifies the background image using an absolute or relative URL address. If you omit this parameter, the filter will not function.

Firefox cannot support the innertext
Firefox supports innerHTML but does not support innertext, it supports textcontent to achieve innertext, but by default the extra space is retained. If you don't use textcontent, you can replace it with innerHTML if the string contains no HTML code.

prohibit selection of Web page content
In IE, js:obj.onselectstart=function () {return false;}
and Firefox uses Css:-moz-user-select:none

Support for Filters (example: Transparent filters)
IE:filter:alpha (opacity=10);
firefox:-moz-opacity:.10;

Capturing events
IE:obj.setCapture (), Obj.releasecapture ()
Firefox:document.addEventListener ("MouseMove", mousemovefunction,true);
Document.removeeventlistener ("MouseMove", mousemovefunction,true);

Get mouse position
IE:event.clientX, Event.clienty
Firefox: Event functions are required to pass event objects
Obj.onmousemove=function (EV) {
X= Ev.pagex; Y=ev.pagey;
}

boundary problems of elements such as Div
For example: Set the Css::{width:100px;height:100px;border of a div: #000000 1px solid;}
ie: div width (including border width): 100px,div height (including border width): 100px;
The width of the firefox:div (including the border width): The height of the 102px,div (including the border width): 102px;

determine browser type
var isie=document.all? True:false;
I wrote a variable, if the support document.all syntax so isie=true, otherwise isie=false

CSS processing in different browsers
You can generally use!important to prioritize CSS statements (Firefox only)
For example: {border-width:0px!important;border-width:1px;}
Under Firefox this element is not a border, in IE under the border width is 1px

Document.formName.item ("itemname") problem
Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formName.elements ["ElementName"];firefox, You can only use the document.formname.elements["ElementName"].
Workaround: Unify the use of document.formname.elements["ElementName"].

Collection Class object Problem
Problem Description: IE, you can use () or [] Get collection Class objects, Firefox, can only use [] Get collection class objects.
WORKAROUND: Use [] to get collection class objects uniformly.

Custom Attribute Issues
Problem Description: IE, you can use to get the general properties of the method to obtain custom attributes, can also be used getattribute () derived from the definition of properties, Firefox, can only use getattribute () derived from the definition of attributes.
Workaround: The unification is obtained from the defined attribute through GetAttribute ().

eval ("idname") problem
Problem description: Under IE, you can use the eval ("Idname") or getElementById ("Idname") to get the HTML object ID idname; Firefox, only use getElementById ("Idname") To get the HTML object with the ID idname.
Workaround: Unify the getElementById ("Idname") to get the HTML object with the ID idname.

problem with the same variable name as an HTML object ID
Problem Description: IE, HTML object ID can be used as document subordinate object variable name directly use, Firefox can not; Firefox, you may use the same variable name as the HTML object ID, ie cannot.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take variable names with the same HTML object ID to reduce errors and, when declaring variables, add the var keyword to avoid ambiguity.

Const Problem
Problem Description: Firefox, you can use the Const keyword or the var keyword to define constants, ie, only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.

Input.type Property Problem
Problem Description: IE under the Input.type property is read-only, but Firefox under the Input.type property is read and write.
WORKAROUND: Do not modify the Input.type property. If you have to modify it, you can hide the original input and then insert a new INPUT element in the same location.

window.event Problem
Problem Description: Window.event can only run under IE, but not under Firefox, this is because Firefox event can only be used in the scene of the incident occurred.
Workaround: Add the event argument to the function that occurred and use var myevent = Evt?evt in the function body (assuming the parameter is EVT): (Window.event?window.event:null)
Example: <input type= "button" onclick= "DoSomething (event)"/>
<script language= "JavaScript" >
function DoSomething (evt) {
var myevent = evt? EVT: (window.event? window.event:null)
...
}

Event.x and EVENT.Y problems
Problem description: Under IE, even objects have X, Y properties, but there is no Pagex, Pagey properties; Firefox, even objects have Pagex, Pagey properties, but no X, y properties.
Workaround: var myx = event.x? Event.x:event.pagex;var Myy = Event.y? Event.y:event.pagey;
If the 8th question is considered, replace the event with MyEvent instead.

event.srcelement Problem
Problem description: Under IE, the even object has srcelement properties, but there is no target attribute; Under Firefox, even objects have the target attribute, but there is no srcelement attribute.
Workaround: Use Srcobj = event.srcelement? Event.srcElement:event.target;
If the 8th question is considered, replace the event with MyEvent instead.

window.location.href Problem
Problem Description: Under IE or firefox2.0.x, you can use Window.location or window.location.href;firefox1.5.x, only use window.location.
WORKAROUND: Use window.location instead of window.location.href. Of course, you can also consider using the Location.replace () method.

modal and non-modal window problems
Problem description: Under IE, you can open modal and modeless windows via ShowModalDialog and showModelessDialog;
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. If you need a parent window to control the child window, use var subwindow = window.open (pageurl,name,parameters) to get the newly opened window object.

frame and iframe problem
Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Access to the Frame object
IE: Use Window.frameid or window.framename to access this frame object;
Firefox: Use Window.framename to access this frame object;
Workaround: Unify the use of Window.document.getElementById ("Frameid") to access this frame object;

(2) Switch frame content
Window.document.getElementById ("Frameid") can be used in both IE and Firefox. src = "xxx.html" or window.frameName.location = "xxx.html" To toggle the contents of the frame;
If you need to return a parameter in a frame to the parent window, you can use the parent keyword in the frame to access it.

Body Loading Problem
Problem Description: Firefox's body object in the body tag is not fully read by the browser before the existence, and IE's body object must be in the body tag is fully read into the browser after the existence.
[note] This problem has not been validated and will be modified after verification.
[note] There are no such problems in IE6, Opera9, and FireFox2, and simple JS scripts can access all the objects and elements that have been loaded before the script, even if the element is not yet loaded.

Event Delegate Method
Problem description: Under IE, use document.body.onload = inject, where function inject () has been implemented before, under Firefox, use document.body.onload = inject ();
Workaround: Unify the use of the Document.body.onload=new Function ("inject ()"), or document.body.onload = function () {//* Here is the code */}
Attention The difference between function and function

the difference between the parent elements accessed
Problem description: Under IE, use obj.parentelement or Obj.parentnode to access the parent node of obj; under Firefox, use Obj.parentnode to access the parent node of obj.
Workaround: Because both Firefox and IE support DOM, the Obj.parentnode is used uniformly to access the parent node of obj.

Cursor:hand VS Cursor:pointer
Problem Description: Firefox does not support hand, but IE support pointer, both are hand-shaped instructions.
Workaround: Unify the use of pointer.

the problem of innertext
Problem description: InnerText in IE can work, but innertext in Firefox but not.
WORKAROUND: Use textcontent instead of innertext in non IE browsers.
Example:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById ("element"). innertext = "my text";
}else{
document.getElementById ("element"). Textcontent = "my text";
}
[note] InnerHTML at the same time by IE, Firefox and other browser support, other, such as outerhtml, such as only by IE support, preferably not.

Object Width-height assignment problem
Problem Description: Firefox similar obj.style.height = imgobj.height statement is invalid.
Solution: Unified Use of Obj.style.height = Imgobj.height + "px";

table Operation Problem
Problem description: IE, Firefox and other browsers for table label operation are different, in IE not allowed to table and TR innerHTML assignment, use JS to add a TR, use the AppendChild method also no use.
Workaround:
Append a blank line to the table:
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);
[note] Since I rarely use JS directly to manipulate the table, this problem has not been encountered. It is recommended that you use the JS framework set to manipulate the table, such as jquery.

UL and ol list indent issues
Elimination of 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. ← This statement is wrong, detailed see ↓
[note] This problem has not been validated and will be modified after verification.
[note] In IE, the setting margin:0px can remove the top and bottom indent of the list, the blank and the list number or the dot, setting the padding has no effect on the style; in Firefox, setting the margin:0px can only remove up and down whitespace, setting padding : 0px can only remove the left and right indentation, you must also set the List-style:none to remove the list number or dot. In other words, in IE only set margin:0px to achieve the final effect, and in Firefox must be set margin:0px, padding:0px and List-style:none three to achieve the final effect.

CSS Transparency Issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] The best two are written and the opacity attribute is placed below.

css Fillet problem
Ie:ie7 The following versions do not support rounded corners.
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;.
[Note]  fillet problem is a classic problem in CSS, it is recommended to use the jquery framework set to set rounded corners, so that these complex problems for others to think about it.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.