First of all, we need to know why each browser generates compatibility problems.
The main reason for this problem is that there are many kinds of browsers on the market, but the different browsers’ kernel is not consistent, which leads to the difference between the browsers’ parsing to the web page.
To solve browser compatibility problems, there are three aspects: HTML part, CSS part and JS part.
a、The most prominent and easy to think of is that high version browsers use elements that are not recognized by low browsers, resulting in inability to parse. This is mainly on the HTML5’s new label
The solution is that the htmlshim framework enables HTML5 browsers less than IE9 to support the browser.
b、imgThe alt attribute of the browser does not match the resolution of the browser.
Under chrome, a damaged picture is displayed. The text of ALT is displayed under FF, while the damaged image and text are displayed in IE.
c、ulThe inside and outside margin of the label
ulThe tag has a default outer margin in IE6\IE7, but there is a default inner margin in IE8 and other browsers.
a、cssHack problem: mainly for different versions of IE, different browsers write differently.
IEThe condition annotation hack:
<!–[if IE 6]>The content here is only IE6.0 visible <! [endif]–>
<!–[if IE 7]>The content here is only IE7.0 visible <! [endif]–>
b、IE6The problem of bilateral distance: when IE6 is floating, there is another horizontal margin. At this time, the outer distance of the element is 2 times its value.
The solution: display:block;
c、IE6There is a gap at the bottom of the picture
Solution: setting up display:block for img;
d、IE6There will be a 3px bug between the next two float
Solution: set float:left to the elements on the right.
e、IE6There is no concept of min-width, and its default width is min-width.
f、IE6Under the use of margin:0 Auto; it is impossible to keep it in the middle
Solution: set text-align:center for its parent container;
g、 The hyperlinks after clicking no longer have hover and active attributes.
Solution: write the CSS style in the order of lvha
h、After using absolute or relative positioning, the Z-index failure is set in IE because its elements depend on the Z-index of the parent element, but the parent element is 0, and the child is low, so the order of display will not be changed.
i、IE6The row height of 1px cannot be set up because of its default line height.
Solution: set up overflow:hidden or line-height:1px;
a、The standard event binding method function is addEventListener, but IE is attachEvent;
b、The way of capturing events is inconsistent. Standard browsers are from outside to inside, while IE is from inside to outside, but the final result is to set IE’s standard as standard.
c、We often say that the event attribute of event handling is imported by standard browser, and is acquired by window.event under IE. And the way to get the target elements is also different. The standard browser is event.target, while IE is event.srcE.Lement
d、The value of the date processing function obtained in the lower version of IE is not the difference from 1900, but the high version of the IE keeps the same with the standard browser, and the value obtained is also the difference from the 1900.
For example, VAR year= new Date ().GetYear ();
e、ajaxThe way of implementation is different. What I understand is the difference between getting XMLHttpRequest and activeXObject under IE.
f、IEInnerHtml can’t operate tr
g、The way to get the parent node and child node of DOM node is different.
Other browsers: parentNode parentNode.childNodes