Browser compatibility issues and solutions

The so-called browser compatibility problem , refers to the different browsers because different code has different parsing, resulting in the page effect display is not uniform situation. In most cases, our demand is that no matter what browser the user uses to view our website or to login to our system, it should be a unified display effect. So browser compatibility is a problem that front-end developers often encounter and must solve.

Browser compatibility issues Rollup JavaScript

1.event.srcelement problems

Problem Description:

Under IE, even object has srcelement attribute, but no target attribute;

Under standard browsers (such as Firefox), the even object has a target property and no Srcelement property.

Workaround: Use srcobj = Event.srcelement?event.srcelement:event.target;

or var target = Event.srcelement | | Event.target;

and var ev = EV | | window.event;

2. Box model problems

There are two types and models: IE box model, standard box model.

Box Model: content, padding (padding), margin (margin), border (border).

The content section of IE contains border and padding.

Workaround:

body.style{width:100px;border:1px;}

IE is understood as Box.width = 100

Standard browser understood as Box.width = 100 + 1*2 = 102//plus Border 2px

Solution: div{margin:30px!important; margin:28px;}

Note that the order of the two margin cannot be reversed, IE does not recognize the!important attribute, but other browsers can recognize it. So under IE actually explains this: div{margin:30px;margin:28px;}

Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

3. Double-sided bug problem, float-induced (IE6)

Workaround: Use Display:inline

4. Hyperlink hover Invalid after click

FIX: Attributes use the correct writing order for link visited hover active

5.CSS Transparent, ie5-8 not supported opacity

FIX:. Opacity {

opacity:0.6;

Filter:alpha (opacity=60); /* for IE5-7 */

-ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (Opacity = 60)"; /* for IE8 */

}

6.IE6 does not support PNG transparent backgrounds

fix: Use gif pictures under IE6

Png24 's picture appears on the IE6 browser background, resolved: Made Png8

Browser compatibility issues and solutions