Browser compatibility issues and solutions

The so-called browser compatibility problem, refers to because different browsers have different parsing of the same code, resulting in the page display effect 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.

Before learning browser compatibility, I wanted to divide the front-end developers into two categories:

The first category is precisely in accordance with the design of the development of the front-end developers, can be said to be accurate to 1px, they will easily find the lack of design drawings, and in rare cases will encounter browser compatibility issues, and these problems are often dead browser bugs, and they made the page easy to maintain, code reuse problems less , can be said to be more solid and reassuring code.

The second type is basically in accordance with the design of the development of the front-end developers, a lot of details of the gap is very large, not better than the spacing, row height, picture location and so often a few px. The implementation of an effect is also repeated debugging to get, specifically why this effect is also vague, the overall layout is very fragile. The slightest change is a mess. Why the code is so written is unknown. Such developers are often trapped by compatibility issues. Modified this browser and another browser chaos. Change to change to also have no clue. In fact, most of the compatibility problems they encounter should not be attributed to the browser, but their technology itself.

The article is mainly aimed at the first type, rigorous type of developers, so here mainly from the browser to resolve differences in the perspective of the analysis of compatibility issues. (related article recommended: mainstream browser CSS 3 and HTML 5 Compatibility List )

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

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 question six: 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.

Chance to hit: 5%

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.

Browser compatibility issue VII: Compatible CSS settings for transparency

The way to do a compatible page is to write a small piece of code (a line or a piece of the layout) we have to see in different browsers is compatible, of course, proficiency to a certain degree is not so troublesome. It is recommended that you often encounter compatibility issues with novice users. Many compatibility issues are caused by the browser's default attribute resolution for the label, as long as we can easily fix these compatibility issues with a little bit of setup. If we are familiar with the default properties of tags, we can understand why compatibility issues arise and how to resolve them.

1. /* CSS hack*/

I seldom use hacker, may be personal habits bar, I do not like to write code ie incompatible, and then use Hack to solve. But the hacker is still very useful. Using hacker I can divide the browser into 3 categories: IE6, IE7 and Roaming, others (IE8 Chrome FF Safari Opera, etc.)

IE6 know Hacker is the underscore _ and the asterisk *

IE7 Hacker is an asterisk *

For example, a CSS setting like this:

1. height:300px;*height:200px;_height:100px;

IE6 Browser when reading to height:300px will think high 300px; Continue reading, he also know *heihgt, so when IE6 read *height:200px will overwrite the previous one of the conflicting settings, think height is 200px. Continue to read, IE6 also know _height, so he will cover off 200px high setting, set the height of 100px;

IE7 and roaming are the same. read from the setting of height 300px. When they read the *height200px, they stopped because they didn't know _height. So they will parse the height into 200px, the rest of the browsers only know the first height:300px, so they will parse the height into 300px. The order of the writing is important because the same priority and the conflicting properties are set to overwrite the previous one.

Browser compatibility issues and solutions