JAVASCRIPT IE and FF compatible notation record _ Experience Exchange

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

enabled: Available options. A Boolean value (Boolean). Sets or retrieves whether the filter is active. True: the default value. Filter activated. False: The filter is forbidden.
Sizingmethod: Options available. String. Sets or retrieves how the picture of the object that the filter acts on is displayed within the bounds of the object container. Crop: Cuts the picture to fit the object's size. Image: Default value. Increase or decrease the size boundaries of an object to fit the dimensions 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 this parameter is omitted, the filter will not function.

Firefox cannot support InnerText
Firefox supports innerHTML but does not support innertext, it supports textcontent to implement innertext, but it also retains the extra space by default. If you do not need to textcontent, if the string contains no HTML code can also be replaced with innerHTML.

prevent page content from being selected
In IE, generally with js:obj.onselectstart=function () {return false;}
and Firefox uses Css:-moz-user-select:none

Filter Support (example: transparent filter)
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 function needs to pass event object
Obj.onmousemove=function (EV) {
X= Ev.pagex; Y=ev.pagey;
}

boundary problems with Div and other elements
For example: Set a div's css::{width:100px;height:100px;border: #000000 1px solid;}
ie: width of div (including border width): height of 100px,div (including border width): 100px;
And the width of the firefox:div (including the border width): 102px,div height (including the border width): 102px;

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

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

Document.formName.item ("ItemName") issues
Problem description: Under IE, you can use Document.formName.item ("ItemName") or document.formName.elements ["ElementName"];firefox, Use only document.formname.elements["ElementName"].
Workaround: Use document.formname.elements["elementname" uniformly.

Collection Class object issues
Problem description: Under IE, you can use () or [] get the Collection class object; Firefox can only use [] to get the collection class object.
WORKAROUND: Use [] uniformly to get the collection class object.

Custom Attribute Issues
Problem description: Under IE, you can get custom properties by using the method of getting the general properties, or you can use GetAttribute () to obtain the custom attributes, and under Firefox, you can only use getattribute () to derive the custom attributes.
Workaround: Unify through getattribute () to get the custom attributes.

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

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

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

Input.type Property Issues
Problem Description: The Input.type property under IE is read-only, but the Input.type property in Firefox is read-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 Problems
Problem Description: Window.event can only run under IE, but not under Firefox, because Firefox event can only be used on the spot where events occur.
Workaround: Add an event parameter to the function that occurred on the incident, and use var myevent = Evt?evt in the function body (assuming the parameter is EVT): (Window.event?window.event:null)
Example:
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.