Common browser compatibility issues and solutions

The so-called browser compatibility problem, refers to the same code because different browsers have different parsing, resulting in the page display effect is not uniform situation. In most cases, our demand is that no matter what browser users use to view our site or 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 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 are very easy to find the lack of design drawings, and in very few cases will encounter browser compatibility issues, and these problems are often dead browser bugs, and they made the page later easy to maintain, Code reuse is less problematic and can be said to be more robust and reassuring.

The second type is basically in accordance with the design of the development of the front-end developers, very many details of the gap is very large, less than the spacing, row height, picture location and so on are often a few px. The implementation of some kind of effect is also repeated debugging to get, detailed why this effect is also vague, the overall layout is very fragile. The slightest modification is a mess. Why the code is so written is unknown. This type of developer is often trapped by compatibility issues. Modified the browser is a mess and there is a browser. Change to change to also have no clue. In fact, most of the compatibility problems they encounter should not be attributed to browsers, but to 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 angle of 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 beginning of the CSS file 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% (pages with slightly more complex points will be encountered, float layout most common browser compatibility issues)

Workaround: Add Display:inline to float's label style control and convert it to inline properties

Note: We most often use the div+css layout, and Div is a typical block attribute tag, horizontal layout when we are usually implemented with Div float, the horizontal spacing is assumed to be implemented with margin, 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%

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

Note: This is usually the case when we set a small rounded background label. The solution to this problem is that the IE8 browser 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 use of float layout, there are horizontal margin, IE6 pitch bug

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

Chance to hit: 20%

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

Note: In-line property labels, in order to set the width, we need to set Display:block, (except the input tag is more special). With float layout and horizontal margin, under IE6, he has a bug of horizontal margin after the Block property float. Just because it is the inline attribute tag itself, so we add display:inline words, its aspect is not set. At this time we also need to add display:talbe behind the 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%

Workaround: Use the Float property for the IMG layout

NOTE: Since the IMG tag is an inline attribute tag, the IMG tag will be on one line only if 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 easy to cause 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 good to be compatible with each browser.

Chance to hit: 5%

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

Note: In the B/S system front-end open, there are very many circumstances we again such a 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 height of the container 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. Recommendations are often used by newcomers to compatibility issues. A lot of compatibility issues are due to the browser's default attribute resolution for the label, which can be easily resolved by just a few settings. Assuming that we are familiar with the default properties of tags, we can understand very well why compatibility issues arise and how to resolve them.

 
   
  

  
    
   
/* CSS hack*/
 
   
  

I very rarely use hacker, may be personal habits bar, I do not like to write code ie incompatible, and then use Hack to solve. Just 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, such a CSS setting:

 
   
  

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

IE6 Browser when reading to height:300px will feel 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 did not know _height. So they will parse the height into 200px, and the rest of the browsers just know the first height:300px, so they will parse the height into 300px. The order of the writing is very important because the same priority and the conflicting properties are set to overwrite the previous one.

Common browser compatibility issues and solutions