Common browser compatibility Problem resolution

Recently just to do an e-commerce project, the results met a lot of compatibility problems made me almost dizzy brain rise, went to look up a lot of information, so-called browser compatibility problem, refers to because different browsers on the same piece of code has different parsing, resulting in the page display effect is not uniform. 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. Let me share with you some common browser compatibility issues:

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.

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

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

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

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 question five: child elements kidnap the parent element's Margin-top

Problem symptom: This problem mainly occurs in non-IE browser. If there is nothing between the child element and the parent element, when the child element is set to Margin-top, the child element does not move, and the parent element moves down because of the margin-top.

Solution: Add <div stye= ' height:0 ' >&nbsp;</div> between the parent and child elements. or set the padding-top of the parent element.

Browser compatibility question Six: The picture is spaced by default

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

Solution: Use the Float property for the IMG layout

NOTE: Because the IMG tag is an inline attribute tag, the img tag is lined up on a single line as long as the container width is not exceeded, but there is a gap between the IMG tags in some browsers. Removing this spacing using float is the right path. (One of my students uses negative margin, although it can be solved, but the negative margin itself is prone to browser compatibility problems, so I forbid them to use)

Browser compatibility Issue VII: Label minimum height setting min-height incompatible

Problem symptom: Because Min-height itself is an incompatible CSS property, setting Min-height is not very well compatible with each browser.

Solution: If we want to set a minimum height of 200px for a label, the setting required is: {min-height:200px; height:auto!important; height:200px; overflow:visible;}

Note: In the front of the B/s system, there are many situations where we have this demand. When the content is less than a single value (such as 300px). The height of the container is 300px, and when the content height is greater than this value, the container height is high, not the scroll bar. This is when we face this compatibility issue.

These are some of the most common compatibility issues, of course, and many of them are not listed.

Common browser compatibility Problem resolution