Common browser compatibility issues

The so-called browser compatibility problem, refers to because different browsers have different parsing of the same code, resulting in the situation of the obvious effect. In most cases, our demand is that what browser to view our station or login to our system, should be the result of a unified. So browser compatibility is a problem that front-end developers often encounter and must solve.

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

The first type 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 that the design diagram is not, and in rare cases will encounter browser compatibility issues, these problems are often dead browser bugs, and they made the late maintenance, code problems, it can be said to be The more firmly placed 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 not as good as the spacing, figure position and so on are often poor px. The implementation of a certain effect is also repeated debugging to get, specifically why this effect is also vague, the overall layout of vulnerable. A slight change on the seven bad. Why the code is so written is unknown. This type of developer is often trapped in compatibility issues. Modified this browser to mess up another browser. Change to change to also have a clue. In fact, they meet the compatibility problem part should not be blamed on the browser, is their technical Ben.

Mainly for the first type, rigorous developers, so this is mainly from the browser to resolve the difference in degrees to analyze compatibility issues.

Browser compatibility issues: Different browser tags default external patches and internal patches are different

Problem symptom: Casually write a label, do not add style control case, each margin and padding difference is compared.

Hit frequency: 100%

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

Note: This is the most common and the most easy to solve the browser compatibility problem, all the CSS pieces at the beginning of the wildcard * to set the internal and external patches of each tag is 0.

Browser compatibility issues: block attribute label float, there are horizontal margin cases, set in IE6 display margin

Symptoms: Often symptoms are IE6 in the back of the block is top to bottom

Frequency: 90% (a bit more complex will come across, float layout most common browser compatibility issues)

Solution: Add Display:inline in the label style control of float and convert it to an inner property

Note: Our most common is the div+css layout, Div is a typical block attribute tag, horizontal layout when we are usually div float implementation, horizontal spacing setting if margin is implemented, this is a necessary compatibility problem.

Browser compatibility Issue Three: Set the degree of the label (like 10px), in the Ie6,ie7, the travel medium is more than the set degree of

Problem symptoms: IE6, 7, and travel the degree of this label is not controlled, exceeding the set degree

Hit frequency: 60%

Solution: Set the Overflow:hidden for the excess label, or set Line-height to the degree you set.

Note: This happens when we set the label for the circle background. This problem occurs because the browser before IE8 will give the label a default degree. Even if your label is empty, the label's degree will be reached by default.

Browser compatibility issues Four: Inside the property label, set Display:block after the float layout, there are horizontal margin, IE6 pitch bug

Problem symptom: IE6 spacing exceeds the set spacing

Chance to hit: 20%

Solution: In Display:block, after adding display:inline;display:table;

Note: Within the Properties tab, in order to set the width, we need to set the Display:block; (except for the input tag is more special). After the float layout and the horizontal margin, under IE6, he has a bug with the horizontal margin after the Block property float. However, because it is a property tag, so we add display:inline, its width is not set. At this time we also need to add display:talbe after display:inline.

Browser compatibility question five: elements of kidnapping elements of Margin-top

Problem symptom: This problem mainly occurs in IE browser. If there is nothing between the element and the element, the element is not moved after the element is set margin-top, and the element moves down because of margin-top.

Chance to hit: 80%

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

Browser compatibility question Six: The chart is spaced by default

Problem symptom: When an IMG tag is placed, some browsers will have default spacing, adding the wildcard characters mentioned in the question.

Chance to hit: 20%

Solution: Make the Float property an img layout

NOTE: Because the IMG tag is an inside attribute tag, the IMG tag will be queued as long as the container width is not exceeded, but there is a gap between the IMG tags in some browsers. Removing this spacing makes float the right path. (My study makes the negative margin, although can solve, but the negative margin is easy to cause browser compatibility problems, so I forbid them to make)

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

Problem symptom: Because Min-height 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 label of the maximum 200px, need to enter the setting is: {min-height:200px; height:auto!important; height:200px; overflow:visible;}

Note: In the front-end of B/s system, there are many cases of our demand. When the content is on a value (such as 300px). The degree of the container is 300px, and when the content is at this value, the container is propped up, not the scroll bar. This is the compatibility issue we will be facing.

Browser compatibility issues: Transparency-compatible CSS settings

IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).

ff:opacity:0.6.

The method of compatibility is: Every piece of code (layout or block) we have to see in different browsers are compatible, of course, the degree of proficiency is not so annoying. Recommendations often encounter new compatibility issues. 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 rarely make hacker, may be a habit, I do not like to write the code ie incompatible, and then hack to solve. But hacker is always good. So hacker I can divide the browser 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 *

Such a CSS setting: height:300px;*height:200px;_height:100px;

IE6 Browser When reading to height:300px will think of the time 300px; Continue reading, he also know *heihgt, so when IE6 read *height:200px It will overwrite the conflicting settings of the previous bar, and consider the degree to be 200px. Continue to read, IE6 also know _height, so he will cover the 200px settings, the degree is set to 100px;

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

2. Conditional comments

<!--[If LTE IE 6]> this paragraph is only available in IE6 and IE6 versions below. <! [endif]--> <!--[if GTE IE 6]> This paragraph only appears in IE6 and IE6 versions above. <! [endif]-->

<!--[if GT IE 6]> This paragraph only appears in IE6 or above (not including IE6). <! [endif]--> <!--[if IE 5.5]> This paragraph is only apparent in IE5.5. <! [endif]-->

<!--loaded in IE6 and IE6 versions css-->

<!--[If LTE IE 6]> <link type= "text/css" rel= "stylesheet" href= "Css/ie6.css" mce_href= "Css/ie6.css"/><! [endif]-->

The disadvantage is that an additional number of HTTP requests may be added under IE browser.

Common browser compatibility issues