JAVASCRIPTIE and FF compatibility problem summary _ javascript skills

Source: Internet
Author: User
Some attributes are different in different browsers. The following is a summary of ie and firefox. Png transparentAlphaImageLoader
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (enabled = bEnabled, sizingMethod = sSize, src = sURL)

Enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True: default value. Filter activation. False: the filter is disabled.
SizingMethod: Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container. Crop: Cut the image to fit the object size. Image: default value. Increase or decrease the size boundary of an object to fit the image size. Scale: scale the image to adapt to the size boundary of the object.
Src: required. String ). Specify the background image using an absolute or relative url. If this parameter is ignored, the filter will not work.

Firefox cannot support innerText
Firefox supports innerHTML but does not support innerText. It supports textContent to implement innerText, but by default, redundant spaces are retained. If textContent is not required, you can use innerHTML instead if the string does not contain HTML code.

Disable webpage Content Selection
Js: obj. onselectstart = function () {return false;} is generally used in IE ;}
Firefox uses CSS:-moz-user-select: none

Filter support (for example, transparent filter)
IE: filter: alpha (opacity = 10 );
Firefox:-moz-opacity:. 10;

Capture 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: The event object needs to be passed by the event function.
Obj. onmousemove = function (ev ){
X = ev. pageX; Y = ev. pageY;
}

DIV and other element boundary issues
For example, set a p CSS: {width: 100px; height: 100px; border: #000000 1px solid ;}
In IE: width of p (including Border width): 100px, height of p (including Border width): 100px;
Firefox: the width of p (including the Border width): 102px, the height of p (including the Border width): 102px;

Determine the browser type
Var isIE = document. all? True: false;
I wrote a variable. If the document. all syntax is supported, isIE = true; otherwise, isIE = false.

CSS processing in different browsers
Generally, it can be used! Important Uses css statements first (only supported by firefox)
For example: {border-width: 0px! Important; border-width: 1px ;}
In firefox, this element has no border, and the Border Width under IE is 1px.

Document. formName. item ("itemName ")
Problem description: in IE, you can use document. formName. item ("itemName") or document. formName. elements ["elementName"]; In Firefox, only document. formName. elements ["elementName"].
Solution: Use document. formName. elements ["elementName"].

Collection Object Problems
Problem description: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects.
Solution: use [] to retrieve collection class objects.

Custom Attributes
Problem description: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getAttribute () to obtain Custom Attributes. In Firefox, you can only use getAttribute () obtain custom attributes.
Solution: Get custom attributes through getAttribute.

Eval ("idName") Problems
Problem description: in IE, you can use eval ("idName") or getElementById ("idName") to obtain the HTML object whose id is idName; in Firefox, you can only use getElementById ("idName") to obtain the HTML object whose id is idName.
Solution: Use getElementById ("idName") to retrieve the HTML object with id as idName.

The variable name is the same as the ID of an HTML object.
Problem description: in IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but not in Firefox. In Firefox, the variable name that is the same as the ID of the HTML object can be used, IE.
Solution: Use document. getElementById ("idName") to replace document. idName. We recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add the var keyword to avoid ambiguity.

Const Problems
Problem description: In Firefox, you can use the const keyword or var keyword to define constants. in IE, you can only use the var keyword to define constants.
Solution: Use the var keyword to define constants.

Input. type attribute Problems
Problem description: The input. type attribute in IE is read-only, but the input. type attribute in Firefox is read/write.
Solution: do not modify the input. type attribute. If you must modify it, You can first hide the original input, and then insert a new input element at the same position.

Window. event Problems
Problem description: window. event can only be run in IE, but not in Firefox, because Firefox event can only be used in the event.
Solution: add the event parameter to the function where the event occurs and use var myEvent = evt? 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.