Common Browser compatibility problems and solutions

The browser compatibility problem refers to the situation where different browsers have different resolutions for the same code, resulting in inconsistent page display effects. In most cases, our requirement is that no matter which browser the user uses to view our site or log on to our system, the display effect should be consistent. Therefore, browser compatibility is a problem that front-end developers often encounter and must solve.

Before learning browser compatibility, I want to divide front-end developers into two types:

The first category is the front-end developers who precisely develop designs according to the design diagram. They can say that they are accurate to 1 px, and they are very easy to find the design diagram deficiencies, in addition, there are few browser compatibility problems, and these problems are often caused by browser bugs. In addition, the pages they create are easy to maintain and there are few issues with code reuse, it can be said that the code is more powerful than the hacker.

The second type is the front-end developers who basically develop based on the design drawing. The gap between many details is very large, and the gap is not as high as the distance, line height, and image location. The implementation of a certain effect is also achieved through repeated debugging. Why is this effect still vague and the overall layout is very fragile. A slight modification is messy. I still don't know why the code is written. Such developers are often troubled by compatibility issues. After modifying the browser, there is another browser. There is no clue how to change it. In fact, most of the compatibility problems they encounter should not be attributed to browsers, but to their own technology.

This article focuses on the first type of rigorous developers. Therefore, this article mainly analyzes compatibility issues from the perspective of browser resolution differences. (Recommended in related articles: compatible list of mainstream browsers CSS 3 and HTML 5)

Browser compatibility problem 1: The default external patch and internal patch for different browsers are different

Symptom: When you write a few labels without style control, the difference between the margin and padding is large.

Frequency: 100%

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

Note: This is the most common and easiest solution for browser compatibility. Almost all CSS files start with a wildcard * to set the internal and external patches of each label to 0.

Browser compatibility problem 2: When the block attribute label float is followed by a rampant margin, the margin value displayed in IE6 is larger than that set.

Symptom: the common symptom is that the last part of IE6 is pushed to the next row.

Frequency: 90% (pages with slightly complex points will encounter, the most common browser compatibility problem in float layout)

Solution: Add display: inline in the label style Control of float to convert it to intra-row attribute.

Note: div + CSS is the most commonly used layout, and DIV is a typical block attribute label. During horizontal layout, we usually use Div float, the horizontal padding settings are implemented using margin, which is a compatibility issue that will inevitably occur.

Browser compatibility issue 3: Set a smaller height tag (generally less than 10px). in IE6, IE7, the height of the browser exceeds the configured height.

Symptoms: the height of the label in IE6, 7, and travel is not controlled, and exceeds the height set by yourself.

Frequency: 60%

Solution: Set overflow: hidden for the label that exceeds the height; or set the line height line-height to be smaller than the height you set.

Note: In this case, we usually set the label in the background of the small rounded corner. The solution to this problem is that the browser before IE8 will label a minimum default Row Height. Even if your tag is empty, the height of the tag will still reach the default Row Height.

Browser compatibility issue 4: Intra-row attribute labels, setting the display: block after the crash uses the float layout, and there is a rampant margin situation, IE6 padding bug

Symptom: the gap ratio in IE6 exceeds the configured gap.

Chances: 20%

Solution: Add "display: inline; display: Table" after "display: Block;

Note: In-row attribute labels, in order to set the width and height, we need to set display: block; (except that the input label is more special than limit ). After using float layout and having a horizontal margin, in IE6, he has the bug of the horizontal margin after the block attribute float. It is only because it is a row attribute label, so if we add display: inline, its height and width cannot be set. At this time, we also need to add "display: talbe" after "display: inline.

Browser compatibility question 5: The picture is separated by default

Symptoms: when several IMG tags are put together, Some browsers have the default spacing, and the wildcard mentioned in question 1 does not work.

Chances: 20%

Solution: Use the float attribute for the IMG Layout

Note: Because the IMG label is a row attribute label, the IMG label will be placed in a row only if the container width is not exceeded, but there will be a gap between the IMG labels of Some browsers. Remove the spacing and use float as the main path. (One of my students uses negative margin. Although it can solve this problem, negative margin itself is a method of using easy to cause browser compatibility problems, so I forbid them to use it)

Browser compatibility Question 6: The minimum label height setting Min-height is not compatible

Symptom: Because Min-height is an incompatible CSS attribute, it cannot be well compatible with various browsers when Min-height is set.

Chances: 5%

Solution: Suppose we want to set the minimum height of a tag to PX, we need to set it to: {Min-Height: 200px; Height: Auto! Important; Height: 200px; overflow: visible ;}

Note: When the front-end of the B/S system is enabled, there are many such requirements. When the content is smaller than one value (for example, 300px. The height of the container is PX. When the content height is greater than this value, the height of the container is supported, rather than the scroll bar. At this time, we will face this compatibility problem.

Browser compatibility Question 7: Transparency-compatible CSS settings

The page compatibility method is as follows: every time we write a small piece of code (one line or one piece in the layout), we need to check whether it is compatible in different browsers, of course, it is not so troublesome to be proficient to a certain extent. We recommend that you use it for new users who often encounter compatibility problems. Many compatibility problems are caused by different parsing of the default attributes of tags by the browser. These compatibility problems can be easily solved only with a slight setup. If we are familiar with the default attributes of tags, we can understand why there are compatibility problems and how to solve these compatibility problems.

 
 

  
  
/* CSS hack*/ 
 
 

I rarely use hacker. It may be my personal habit. I don't like writing code that is incompatible with IE and then use hack to solve it. Only hacker is very useful. Using hacker, I can divide browsers into three categories: IE6, IE7, and travel; others (IE8 chrome FF safari opera, etc)

◆ Hacker recognized by IE6 is an underscore _ and a star number *

◆ Hacker recognized by Internet Explorer 7 is an asterisk *

For example, a CSS setting:

 
 

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

When the IE6 browser reads the height: 300px, it will feel that the height is PX. When the browser continues to read, it also knows * heihgt, so when IE6 reads * Height: when 200px is used, the conflicting settings of the previous one will be overwritten, and the height is 200px. Continue to read, IE6 also knows _ height, so it overwrites the PX high setting and sets the height to PX;

IE7 and roaming are also the same as reading from a PX height setting. When they read * height200px, they stop because they don't know _ height. So they will resolve the height to 200px, and the remaining browsers will only recognize the First Height: 300px; so they will resolve the height to 300px. The order of writing is very important because the second attribute with the same priority will overwrite the previous one.