Some compatibility problems and solutions of common IE browser

Browser compatibility Issue One: different browser tags default external patches and internal patches are different

Problem symptom: Write a few labels casually, do not add style control case, each margin and padding difference is big.

Hit frequency: 100%

Solution: CSS in *{margin:0;padding:0;}

Note: This is the most common and the most easy to solve a browser compatibility problem, almost all of the CSS file starts with a wildcard * to set the internal and external patches of each tag is 0.

Browser compatibility Issue two: block attribute tag float, and there is the margin of the case, in the IE6 show margin than set the large

Problem symptom: A common symptom is that the next piece in IE6 is top to bottom row

Frequency: 90% (a slightly more complex page will encounter, float layout most common browser compatibility issues)

Solution: Add Display:inline to the label style control of float and convert it into inline properties

Note: Our most commonly used is div+css layout, and Div is a typical block attribute tag, horizontal layout when we are usually implemented with div float, horizontal spacing setting if using margin to achieve, this is a must encounter compatibility problem.

Browser compatibility issue Three: set a smaller height label (generally less than 10px), in the Ie6,ie7, the height of the tour beyond its own set height

Symptoms: IE6, 7, and the height of this label are uncontrolled, exceeding the height of your own settings

Hit frequency: 60%

Solution: Set Overflow:hidden for labels that are out of height, or set line height line-height less than you set.

Note: This usually occurs in the label where we set the small rounded background. This problem occurs because the browser before IE8 will give the label a minimum height of the row height. Even if your label is empty, the height of the label will still reach the default row height.

Browser compatibility issues Four: in-line attribute tags, set display:block after the float layout, there are horizontal margin, IE6 spacing bug

Problem symptom: The spacing in IE6 is more than the spacing set

Chance to hit: 20%

Solution: Add display:inline;display:table after Display:block;

Note: In-line property labels, in order to set the width, we need to set display:block; (except that the input tag is special). With float layout and horizontal margin, under IE6, he has a bug of horizontal margin after the Block property float. However, because it is the inline attribute tag itself, so if we add display:inline, its aspect will not be set. We also need to add display:talbe behind Display:inline.

Browser compatibility issue Five: Image default spacing

Problem symptom: When several IMG tags are put together, some browsers will have default spacing, and adding the wildcard character mentioned in the question does not work.

Chance to hit: 20%

Solution: Use the Float property for the IMG layout

Some compatibility problems and solutions of common IE browser