PNG Transparent AlphaImageLoader
filter:progid:(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 prohibited.
sizingMethod: Optional. String. Sets or retrieves how the image of the object used by the filter is displayed within the object container boundary. crop: Cut the image to fit the object size. image: Default value. Increase or decrease the size boundary of the object to fit the size of the image. scale: Scale the image to fit the object's dimensions boundaries.
src: Must-have option. String. Specify the background image using absolute or relative url address. 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 the unnecessary spaces are also preserved by default. If you do not use textContent, if the string does not contain HTML code, you can also use innerHTML instead.
No selection of web page content
In IE, js is generally used: =function(){return false;}
Firefox uses CSS:-moz-user-select:none
Filter support (example: transparent filter)
IE:filter：alpha(opacity=10);
firefox：-moz-opacity:.10;
Capture events
IE：() 、()
Firefox：(”mousemove”,mousemovefunction,true);
(”mousemove”,mousemovefunction,true);
Get the mouse position
IE:、
firefox: event function needs to pass event object
=function(ev){
X= ;Y=;
}
Boundary issues of elements such as DIV
For example: Set a div's CSS::{width:100px;height:100px;border:#000000 1px solid;}
In IE: the width of the div (including border width): 100px, the height of the div (including border width): 100px;
And firefox: the width of the div (including border width): 102px, the height of the div (including border width): 102px;
Determine browser type
var isIE= ? true : false;
I wrote a variable, if syntax is supported then isIE=true, otherwise isIE=false
CSS processing in different browsers
Generally, you can use !important to prioritize css statements (only supported by firefox)
For example: {border-width:0px!important;border-width:1px;}
Under firefox, this element has no border, and under IE, the border width is 1px
("itemName") Question
Problem description: Under IE, you can use ("itemName") or ["elementName"]; under Firefox, you can only use ["elementName"].
Solution: Use ["elementName"] in a unified manner.
Collection object problem
Problem description: In IE, you can use () or [] to get the collection class object; in Firefox, you can only use [] to get the collection class object.
Solution: Use [] to obtain collection class objects in a unified manner.
Custom attribute issues
Problem description: In IE, you can use the method of obtaining regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; in Firefox, you can only use getAttribute() to get custom attributes.
Solution: uniformly obtain custom attributes through getAttribute().
eval("idName") issue
Problem description: In IE, you can use eval("idName") or getElementById("idName") to get the HTML object with idName; in Firefox, you can only use getElementById("idName") to get the HTML object with idName.
Solution: Use getElementById("idName") to obtain the HTML object with id as idName.
Problem with the same variable name as a certain HTML object ID
Problem description: Under IE, the ID of the HTML object can be used directly as the variable name of the document's subordinate object, but not in Firefox; under Firefox, the variable name that is the same as the HTML object ID can be used, but not in IE.
Solution: Use ("idName") instead. It is best not to take variable names with the same HTML object ID to reduce errors; when declaring variables, add the var keyword to avoid ambiguity.
Const issue
Problem description: In Firefox, you can use the const keyword or the 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 uniformly.
Properties Problems
Problem description: The attribute under IE is read-only; but the attribute under Firefox is read-write.
Solution: Don't modify the properties. If you have to modify it, you can first hide the original input and then insert a new input element in the same position.
question
Problem description: It can only run under IE, not Firefox, because Firefox event can only be used on the scene where the event occurs.
Solution: Add event parameters to the function where the event occurs, and use var myEvent = evt?evt:(?:null)
Example: <input type=”button” onclick=”doSomething(event)”/>
<script language=”javascript”>
function doSomething(evt) {
var myEvent = evt ? evt: ( ? : null)
…
}
With the problem
Problem description: Under IE, the even object has x and y attributes, but no pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but no x and y attributes.
Solution: var myX = ? : ;var myY = ? :;
If you consider the 8th issue, just use myEvent instead of event.
question
Problem description: Under IE, the even object has a srcElement property, but no target property; under Firefox, the even object has a target property, but no srcElement property.
Solution: Use srcObj = ? :;
If you consider the 8th issue, just use myEvent instead of event.
question
Problem description: Under IE or Firefox2., it can be used or; under Firefox1., it can only be used.
Solution: Use instead. Of course, you can also consider using the () method.
Modal and non-modal window problems
Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, it cannot.
Solution: Use the (pageURL, name, parameters) method directly to open a new window.
If you need to pass parameters in the child window back to the parent window, you can use it in the child window to access the parent window. If the parent window needs to control the child window, use var subWindow = (pageURL, name, parameters); to obtain the newly opened window object.
Frame and Iframe issues
The following frame is an example:
<frame src=”” id=”frameId” name=”frameName” />
(1) Access frame object
IE: Use or access this frame object;
Firefox: Use to access this frame object;
Solution: Use ("frameId") uniformly to access this frame object;
(2) Switch frame content
In both IE and Firefox, you can use ("frameId").src = "" or = "" to switch the content of the frame;
If you need to pass parameters in the frame back to the parent window, you can use the parent keyword in the frame to access the parent window.
Body loading problem
Problem description: Firefox's body object exists before the body tag is fully read in by the browser; while IE's body object must exist after the body tag is fully read in by the browser.
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It is proved that the above problems do not exist in IE6, Opera9 and FireFox2. A simple JS script can access all objects and elements that have been loaded before the script, even if this element has not been loaded yet.
Event delegation method
Problem description: Under IE, use = inject; where function inject() has been implemented before this; in Firefox, use = inject();
Solution: Use =new Function("inject()"); or = function(){/* Here is the code */}
[Note] The difference between Function and Function
Differences between parent elements that are accessed
Problem description: Under IE, use or to access the parent node of obj; under firefox, use to access the parent node of obj.
Solution: Because both firefox and IE support DOM, they are used uniformly to access obj's parent node.
cursor:hand VS cursor:pointer
Problem description: Firefox does not support hand, but ie supports pointer, both are hand-shaped indicators.
Solution: Use pointer in a unified way.
Issue of innerText
Problem description: innerText works properly in IE, but innerText does not work in FireFox.
Workaround: Use textContent instead of innerText in non-IE browsers.
Example:
if((”Explorer”) >-1){
(”element”).innerText = “my text”;
}else{
(”element”).textContent = “my text”;
}
[Note] innerHTML is supported by browsers such as ie and firefox. Others, such as outerHTML, are only supported by ie, so it is best not to use it.
Object width and height assignment problem
Problem description: A statement similar to = in FireFox is invalid.
Solution: Unified use = + "px";
Table operation issues
Problem description: IE, firefox and other browsers have different operations on the table tag. In ie, it is not allowed to assign innerHTML values to table and tr. When using js, using appendChild method does not work.
Solution:
//Add a blank line to the table:
var row = (-1);
var cell = (”td”);
= “”;
= “XXXX”;
(cell);
[Note] Since I rarely use JS to operate tables directly, I have never encountered this problem. It is recommended to use JS framework sets to manipulate tables, such as JQuery.
ul and ol list indentation problem
When eliminating indentation of lists such as ul, ol, etc., the style should be written as: list-style:none; margin:0px; padding:0px;
The margin attribute is valid for IE and the padding attribute is valid for FireFox. ← This sentence is incorrect, see for details↓
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It is proved that in IE, setting margin:0px can remove the up, down, left and right indentation, blanks, list numbers or dots of the list, and setting padding has no effect on the style; in Firefox, setting margin:0px can only remove the up and down blanks, and after setting padding:0px can only remove the left and right indentation, and you must also set list-style:none to remove the list number or dots. In other words, in IE, you can achieve the final effect by simply setting margin:0px, padding:0px and list-style:none must be set at the same time in Firefox to achieve the final effect.
CSS transparency issue
IE：filter:progid:(style=0,opacity=60)。
FF：opacity:0.6。
[Note] It is best to write both and place the opacity attribute below.
CSS rounded corner problem
IE: The following versions of ie7 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] The rounded corner problem is a classic problem in CSS. It is recommended to use the JQuery framework set to set rounded corners to leave these complex problems for others to think about.
filter:progid:(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 prohibited.
sizingMethod: Optional. String. Sets or retrieves how the image of the object used by the filter is displayed within the object container boundary. crop: Cut the image to fit the object size. image: Default value. Increase or decrease the size boundary of the object to fit the size of the image. scale: Scale the image to fit the object's dimensions boundaries.
src: Must-have option. String. Specify the background image using absolute or relative url address. 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 the unnecessary spaces are also preserved by default. If you do not use textContent, if the string does not contain HTML code, you can also use innerHTML instead.
No selection of web page content
In IE, js is generally used: =function(){return false;}
Firefox uses CSS:-moz-user-select:none
Filter support (example: transparent filter)
IE:filter：alpha(opacity=10);
firefox：-moz-opacity:.10;
Capture events
IE：() 、()
Firefox：(”mousemove”,mousemovefunction,true);
(”mousemove”,mousemovefunction,true);
Get the mouse position
IE:、
firefox: event function needs to pass event object
=function(ev){
X= ;Y=;
}
Boundary issues of elements such as DIV
For example: Set a div's CSS::{width:100px;height:100px;border:#000000 1px solid;}
In IE: the width of the div (including border width): 100px, the height of the div (including border width): 100px;
And firefox: the width of the div (including border width): 102px, the height of the div (including border width): 102px;
Determine browser type
var isIE= ? true : false;
I wrote a variable, if syntax is supported then isIE=true, otherwise isIE=false
CSS processing in different browsers
Generally, you can use !important to prioritize css statements (only supported by firefox)
For example: {border-width:0px!important;border-width:1px;}
Under firefox, this element has no border, and under IE, the border width is 1px
("itemName") Question
Problem description: Under IE, you can use ("itemName") or ["elementName"]; under Firefox, you can only use ["elementName"].
Solution: Use ["elementName"] in a unified manner.
Collection object problem
Problem description: In IE, you can use () or [] to get the collection class object; in Firefox, you can only use [] to get the collection class object.
Solution: Use [] to obtain collection class objects in a unified manner.
Custom attribute issues
Problem description: In IE, you can use the method of obtaining regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; in Firefox, you can only use getAttribute() to get custom attributes.
Solution: uniformly obtain custom attributes through getAttribute().
eval("idName") issue
Problem description: In IE, you can use eval("idName") or getElementById("idName") to get the HTML object with idName; in Firefox, you can only use getElementById("idName") to get the HTML object with idName.
Solution: Use getElementById("idName") to obtain the HTML object with id as idName.
Problem with the same variable name as a certain HTML object ID
Problem description: Under IE, the ID of the HTML object can be used directly as the variable name of the document's subordinate object, but not in Firefox; under Firefox, the variable name that is the same as the HTML object ID can be used, but not in IE.
Solution: Use ("idName") instead. It is best not to take variable names with the same HTML object ID to reduce errors; when declaring variables, add the var keyword to avoid ambiguity.
Const issue
Problem description: In Firefox, you can use the const keyword or the 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 uniformly.
Properties Problems
Problem description: The attribute under IE is read-only; but the attribute under Firefox is read-write.
Solution: Don't modify the properties. If you have to modify it, you can first hide the original input and then insert a new input element in the same position.
question
Problem description: It can only run under IE, not Firefox, because Firefox event can only be used on the scene where the event occurs.
Solution: Add event parameters to the function where the event occurs, and use var myEvent = evt?evt:(?:null)
Example: <input type=”button” onclick=”doSomething(event)”/>
<script language=”javascript”>
function doSomething(evt) {
var myEvent = evt ? evt: ( ? : null)
…
}
With the problem
Problem description: Under IE, the even object has x and y attributes, but no pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but no x and y attributes.
Solution: var myX = ? : ;var myY = ? :;
If you consider the 8th issue, just use myEvent instead of event.
question
Problem description: Under IE, the even object has a srcElement property, but no target property; under Firefox, the even object has a target property, but no srcElement property.
Solution: Use srcObj = ? :;
If you consider the 8th issue, just use myEvent instead of event.
question
Problem description: Under IE or Firefox2., it can be used or; under Firefox1., it can only be used.
Solution: Use instead. Of course, you can also consider using the () method.
Modal and non-modal window problems
Problem description: Under IE, modal and non-modal windows can be opened through showModalDialog and showModelessDialog; under Firefox, it cannot.
Solution: Use the (pageURL, name, parameters) method directly to open a new window.
If you need to pass parameters in the child window back to the parent window, you can use it in the child window to access the parent window. If the parent window needs to control the child window, use var subWindow = (pageURL, name, parameters); to obtain the newly opened window object.
Frame and Iframe issues
The following frame is an example:
<frame src=”” id=”frameId” name=”frameName” />
(1) Access frame object
IE: Use or access this frame object;
Firefox: Use to access this frame object;
Solution: Use ("frameId") uniformly to access this frame object;
(2) Switch frame content
In both IE and Firefox, you can use ("frameId").src = "" or = "" to switch the content of the frame;
If you need to pass parameters in the frame back to the parent window, you can use the parent keyword in the frame to access the parent window.
Body loading problem
Problem description: Firefox's body object exists before the body tag is fully read in by the browser; while IE's body object must exist after the body tag is fully read in by the browser.
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It is proved that the above problems do not exist in IE6, Opera9 and FireFox2. A simple JS script can access all objects and elements that have been loaded before the script, even if this element has not been loaded yet.
Event delegation method
Problem description: Under IE, use = inject; where function inject() has been implemented before this; in Firefox, use = inject();
Solution: Use =new Function("inject()"); or = function(){/* Here is the code */}
[Note] The difference between Function and Function
Differences between parent elements that are accessed
Problem description: Under IE, use or to access the parent node of obj; under firefox, use to access the parent node of obj.
Solution: Because both firefox and IE support DOM, they are used uniformly to access obj's parent node.
cursor:hand VS cursor:pointer
Problem description: Firefox does not support hand, but ie supports pointer, both are hand-shaped indicators.
Solution: Use pointer in a unified way.
Issue of innerText
Problem description: innerText works properly in IE, but innerText does not work in FireFox.
Workaround: Use textContent instead of innerText in non-IE browsers.
Example:
if((”Explorer”) >-1){
(”element”).innerText = “my text”;
}else{
(”element”).textContent = “my text”;
}
[Note] innerHTML is supported by browsers such as ie and firefox. Others, such as outerHTML, are only supported by ie, so it is best not to use it.
Object width and height assignment problem
Problem description: A statement similar to = in FireFox is invalid.
Solution: Unified use = + "px";
Table operation issues
Problem description: IE, firefox and other browsers have different operations on the table tag. In ie, it is not allowed to assign innerHTML values to table and tr. When using js, using appendChild method does not work.
Solution:
//Add a blank line to the table:
var row = (-1);
var cell = (”td”);
= “”;
= “XXXX”;
(cell);
[Note] Since I rarely use JS to operate tables directly, I have never encountered this problem. It is recommended to use JS framework sets to manipulate tables, such as JQuery.
ul and ol list indentation problem
When eliminating indentation of lists such as ul, ol, etc., the style should be written as: list-style:none; margin:0px; padding:0px;
The margin attribute is valid for IE and the padding attribute is valid for FireFox. ← This sentence is incorrect, see for details↓
[Note] This issue has not been actually verified yet, and will be modified after verification.
[Note] It is proved that in IE, setting margin:0px can remove the up, down, left and right indentation, blanks, list numbers or dots of the list, and setting padding has no effect on the style; in Firefox, setting margin:0px can only remove the up and down blanks, and after setting padding:0px can only remove the left and right indentation, and you must also set list-style:none to remove the list number or dots. In other words, in IE, you can achieve the final effect by simply setting margin:0px, padding:0px and list-style:none must be set at the same time in Firefox to achieve the final effect.
CSS transparency issue
IE：filter:progid:(style=0,opacity=60)。
FF：opacity:0.6。
[Note] It is best to write both and place the opacity attribute below.
CSS rounded corner problem
IE: The following versions of ie7 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] The rounded corner problem is a classic problem in CSS. It is recommended to use the JQuery framework set to set rounded corners to leave these complex problems for others to think about.