WEB browser compatible Recommended collection_javascript skills

It is not necessarily complete, and some may be inaccurate. For example, the newly released IE8, Chrome, etc. are not covered much. Although some recent projects are also compatible with IE8, Chrome, etc., they have not been summarized. Later, Just forgot...sweat. Let’s slowly improve it together.

javascript part

1. document.form.item problem
Problem:
document.formName.item exists in the code ("itemName") cannot be run under FF
Solution:
Use document.formName.elements["elementName"] instead 2. Problems with collection objects
Problem:
Many collection objects in the code use () when accessing them. IE can accept it, but FF cannot. Solution: Use [] instead as the next Standard arithmetic, for example:
document.getElementsByName("inputName")(1) is changed to
document.getElementsByName("inputName")[1]


3. window .event
Problem:
Using window.event cannot run on FFSolution: FF's event can only be used at the scene where the event occurs. This problem cannot be solved yet. You can work around this by passing the event into the function:
onMouseMove = "functionName(event)"
function functionName (e) {
e = e || window.event;
..... .
}


4. The problem of using the id of an HTML object as an object name

Problem:
In IE, the ID of an HTML object can be used as a subordinate object of the document The variable name is used directly and cannot be used in FF. Solution: When using object variables, all use the standard getElementById("idName")


5. Use the idName string to get the object Problem

Problem:
In IE, you can use eval("idName") to get the HTML object with the id idName, but not in FFSolution:Use getElementById("idName ") instead of eval("idName")


6. The problem that the variable name is the same as an HTML object id

Problem:
In FF, because the object id does not work The name of the HTML object, so you can use the same variable name as the HTML object id. It cannot be used in IE. Solution: When declaring variables, always add var to avoid ambiguity. This will also work normally in IE. When running
it is best not to use the same variable name as the HTML object id to reduce errors


7. event.x and event.y issues

problem:
In IE, the event object has x, y attributes, but there is no in FF. Solution: In FF, the equivalent of event.x is event.pageX, but event.pageX does not have
in IE. Therefore, event.clientX is used instead of event.x. There is also this variable in IE
event.clientX and event.pageX. There is a subtle difference, that is, the scroll bar
must be exactly the same. It can be like this:
mX = event .x ? event.x : event.pageX;
Then use mX instead of event.x


8. Regarding the problem of frame

:
can be used in IE window.testFrame gets the frame, it doesn’t work in FF Solution: window.top.document.getElementById("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'


9. Get the attributes of the element

In FF, the attributes you define must be obtained by getAttribute()
10. There is no parentElement, parement.children in FF but parentNode, parentNode.childNodes

Problem: The meaning of the subscript of
childNodes is different in IE and FF. Blank text nodes will be inserted into the childNodes of FFSolution: You can avoid this problem through node.getElementsByTagName()
Problem:
When the node in the html is missing, IE and FF interpret parentNode differently, for example:

The value of input.parentNode in FF is form, while the value of input.parentNode in IE is an empty node
Problem:
The node in FF does not have its own removeNode method
Solution :
You must use the following method node.parentNode.removeChild(node)

11. const problem
Problem:
The const keyword cannot be used in IE
Solution:
Replace

with var 12. The body object
The body of FF exists before the body tag is fully read by the browser, while IE must It only exists after the body has been completely read
This will cause a problem that under IE, when the document is not loaded, a blank page will appear when appendChild on the body
Solution:
Insert everything on the body Node actions are all performed after onload

13. url encoding
Problem:
Generally FF cannot recognize &
in js Solution:
If you write a url in js, just write & don’t write& But textNode has no tagName value. In IE, there is a problem with the use of nodeName
Solution:
Use tagName, but you should check whether it is empty
15. Element attributes

The input.type attribute under IE is read-only, but it can be modified under FF


16. Problems with document.getElementsByName() and document.all[name] :
In IE, neither getElementsByName() nor document.all[name] can be used to obtain the div element
It is not known whether there are other elements that cannot be obtained (this issue is still controversial and is still under study) )
17. Problems with calling elements in sub-frames or other frames

In IE, you can use the following method to get the value in a sub-element
document.getElementById ("frameName").(document.)elementName
window.frames["frameName"].elementName
needs to be changed to the following form to execute in FF, which is compatible with IE: window.frames[ "frameName"].contentWindow.document.elementNamewindow.frames["frameName"].document.elementName


18. Object width and height assignment problem

Problem:
Statements similar to obj.style.height = imgObj.height in FireFox are invalid
Solution:
Uniformly use obj.style.height = imgObj.height "px";
19. Problems with innerText

Problem:
innerText works normally in IE, but innerText does not work in FireFox
Solution:
Use textContent instead of innerText in non-IE browsers
20. Problems with event.srcElement and event.toElement

Problem:
Under IE, the even object has the srcElement attribute, but no target attribute; under Firefox, the even object has target attribute, but there is no srcElement attribute
Solution:
var source = e.target || e.srcElement;var target = e.relatedTarget || e.toElement;

21. Disable selection of web content

Problem:
FF needs to be disabled with CSS, IE needs to be disabled with JS
Solution:
IE: obj.onselectstart = function() {return false ;}FF: -moz-user-select:none;

22. Capture event

Problem:
FF does not have setCapture() or releaseCapture() methods
Solution:
IE:obj.setCapture(); obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event .MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event .MOUSEUP);
}



CSS part



div class

1. Centering problem
The content in the div is centered by IE by default, while FF is left aligned by default You can try adding the code margin:auto

2. Height problem
Two divs arranged one above the other or nested. The upper div sets the height (height). If the actual content in the div is greater than the set height, the two divs will overlap in FF; but in IE, the lower div will overlap. The div will automatically make space for the div above
Therefore, in order to avoid overlapping layers, the height must be controlled appropriately, or simply not write the height and let it adjust automatically. A better method is height:100%;
But when the first-level elements in this div are all float, you need to add an empty div with a sunken bottom at the end of the div block and before the closing. The corresponding CSS is:
.float_bottom {clear:both; height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3. clear:both;

If you don’t want to be affected by float, just write clear:both;


4. Double distance generated by IE floating margin#box {
float:left;
width:100px;
margin:0 0 0 100px; //In this case, IE will generate a distance of 200pxdisplay:inline; //Ignore float }

5. Padding problem
After FF sets padding, the div will increase height and width, but IE will not (* The standard XHTML1.0 definition dtd seems to be consistent)
Control the height appropriately, or try to use height:100%;
To reduce the width, use padding
But according to actual experience, generally there will not be much difference between the padding of FF and IE. The actual width of the div = width padding, so Write the full width and padding of div, and width is defined by subtracting padding from the actual desired width

6. Problems with padding and marign on the y-axis when divs are nested
y in FF The distance between the child div on the axis and the parent div is the parent padding. In IE, the distance between the child div and the parent div on the y axis is the parent padding. In IE, the distance between the child div and the parent div is the larger of the parent padding and the child margin. And when border=0, the distance between the child div and the parent div is 0, and the child margin acts outside the parent div


7. Foolish solutions to padding, margin, height, width
Note that this is a skill, not a method: Write the standard header



Use padding as high as possible, use margin with caution, height try to add 100%, parent height If there are fixed-value child heights, do not use 100%. When all children are floating, add an empty space at the bottom. Clear: Both divs should be as wide as possible and use margins. Use padding with caution. Calculate the width accurately and subtract padding


List class

1. The ul tag has a padding value by default in FF, but in IE only margin has a value
Define ul first {margin:0;padding:0;}

2. Indentation problem of ul and ol lists
When eliminating the indentation of ul, ol and other lists, the style should be written as: { list-style:none;margin:0px;padding:0px;}

Display class

1. display:block,inline two elements
display:block; //You can simulate inline elements as block elementsdisplay:inline; //Achieve the effect of being arranged in the same row
display:table; //for FF, simulate table Effect
display:block block element, the characteristics of the element are:
always starts on a new line;
height, line height and top and bottom margins can be controlled;
default width is 100% of its container, unless setting a width

,
,

,

,

and

are examples of block elements

display:inline is Display the element as an inline element. The characteristics of the element are:
• and other elements are on the same line;
  height, line height and top and bottom margins cannot be changed;
  width is its text or image Width, cannot be changed.
  
  ,
  , , , , and are examples of inline elements
  2. Mouse finger-like display
  Use standard writing cursor: pointer;
  
  Background, picture category
  
  1. Background display problem
  Please pay attention to complete the width and height attributes
  
  2. Background transparency problem
  IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60); IE: filter: alpha(opacity=10);
  FF: opacity:0.6;
  FF: -moz-opacity:0.10;
  It is best to write both and put the opacity attribute below