Common browser compatibility issues for Web front-end developers and tips for solving them

I. What is a browser compatibility issue

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.

Two. Categories for front-end developers

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, which are often browser bugs, And they make the page is easy to maintain later, code reuse problems, 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.

Three. Developers and solutions for this article

This article is mainly for the first type, rigorous developers, so here mainly from the browser to resolve the differences in the perspective of the analysis of 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.
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 property labels, set display:block after the float layout, there are horizontal margin, IE6 spacing bug (similar to the second kind)
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.

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
This is done by writing a small piece of code (one line or piece of the layout) that we have to see in different browsers for compatibility, and certainly not as troublesome to a certain degree of proficiency. 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.

* 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.
Use hacker I can. The browser is divided into 3 categories: IE6, IE7 and roaming; other (IE8 Chrome FF Safari Opera, etc.)
IE6 know Hacker is the underscore _ and the asterisk *
IE7 Hacker is an asterisk * (including the!important in question 6 above is also considered a kind of hack. But less practical. ）
such as such a CSS settings 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 to 300px.
The order of the writing is important because the same priority and the conflicting properties are set to overwrite the previous one.
Finally, a rigorous developer will have the right reset.css. Combine your own experience to avoid issues that are prone to incompatibility. To reduce the use of hack, as far as possible to meet the standard.

Original link: http://www.qianduanview.com/633.html