Several common browser compatibility issues

Recently, I encountered browser compatibility issues on my way to find a job, so I specifically intend to summarize it. First of all, because there are many types of browsers and different browsers have different kernels, each browser has certain differences in the analysis of web pages. This is also the main reason for browser compatibility problems. Our web pages need to be in mainstream browsers. For normal operation, you need to be compatible with the browser. At present, most mainstream frameworks only support IE9+, which is a headache for front-end engineers who require low-end browser compatibility. There is no harm without IE.
Trident kernel: IE, Maxthon, TT;
Gecko kernel: Netcape6+, FireFox;
Presto kernel: Opera7+;
Webkit kernel: Safari, Chrome.
In fact, the compatibility problem is mainly the compatibility of IE with our commonly used browsers, such as FireFox and Chrome. For IE, the compatibility problem of IE9 and above is not big, mainly the compatibility problem of the three versions of IE6 to IE8.
1. The default margins are different.
Use CSS *{margin:0;padding:0;}, which is the simplest and most common method.
2. When the set height label is relatively small (usually less than 10px), the height of IE6 and IE7 will exceed the height set by yourself
. Set overflow: hidden for the label that exceeds the height; or set the line height line-height to be less than the height you set
3. Block After the attribute tag is floated, the margin displayed in IE6 is larger than the setting
. Add display:inline; to the label style control of the float; convert it into an inline attribute
. 4. There is a spacing under the image element img by default. The
image uses the float attribute to solve
5. opacity and more Browser Transparency Compatibility Issue
Take half transparency as an example
{ filter: alpha(opacity=50);/ IE / -moz-opacity: 0.5;/ old version of Mozilla / -khtml-opacity: 0.5;/ old version of Safari / opacity: 0.5; } 6. IE6's 3px bug in IE6 One of the tags floats, and the other non-floating element naturally floats up to 3px between them. Set _margin-right: -3px; to the floating tag to solve this problem. About the compatibility between IE and the commonly used test browser Firefox 1. Form IE: You can use document.formName.item("itemName") or document.formName.elements["elementName"] Firefox: You can only use document.formName .elements["elementName"] solution: unified use of document.formName.elements["elementName"] 2. Collection object IE: You can use () or [] to get collection objects; Firefox: Only use [] to get collections Class object. Solution: Use [] to get collection class objects. 3. Custom properties

















IE: You can use the method of obtaining general attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes.
Firefox: You can only use getAttribute() to obtain custom attributes.
Solution: Get custom attributes uniformly through getAttribute() .
4. Get element
IE: use eval ( "idName") or getElementById ( "idName") to get the HTML object id is idName;
Firefox: use only getElementById ( "idName") to get the HTML object id is idName .
Solution: Use getElementById("idName") to get the HTML object whose id is idName.
5. Duplicate naming The problem that the
variable name is the same as the ID of a certain HTML object
IE: The ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but not under
Firefox ; Firefox: The same variable name as the HTML object ID can be used, IE You can't go down.
Solution: 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; when declaring variables, always add var to avoid ambiguity.
6. const
IE: You can only use the var keyword to define variables.
Firefox: You can use the const keyword or the var keyword to define variables.
Solution: Use the var keyword uniformly to define variables.
In addition, there are many compatibility issues, which will be summarized after encountering them.