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 website 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 type is the front-end developers who precisely follow the design drawing. It can be said that they are accurate to 1 px, and they can easily find out the design drawing deficiencies, in addition, in rare cases, the compatibility of browsers may occur. These problems are often caused by browser bugs, and the pages they create are easy to maintain in the future, with fewer code reuse problems, it can be said that it is a relatively strong and reliable code.

The second type is the front-end developers who basically develop according to the design drawing. There are many minor differences, such as the gap, the line height, and the image position, which are usually a few pixels different. 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 change is messy. I still don't know why the code is written. Such developers are often stuck with compatibility issues. After the browser is modified, another browser is disrupted. 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.

The article mainly targets the first type of rigorous developers. Therefore, this article mainly analyzes compatibility issues from the perspective of browser resolution differences.

Common Browser compatibility problems and solutions

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: * {margin: 0; padding: 0;} In CSS ;}

Note: This is the most common and easiest solution to the browser compatibility problem. Almost all CSS files start with the 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 a little complexity will encounter this problem. The most common browser compatibility problem with float layout)

Solution: Add display: inline to the label style Control of float, and convert it to intra-row attributes.

Note: The most commonly used layout is div + CSS, and div is a typical block attribute label. During horizontal layout, we usually use div float, if you use margin to set the horizontal spacing, this is an inevitable compatibility problem.

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: This situation usually appears in the label where we set the background of a small rounded corner. The cause of 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, float layout after setting display: block, and rampant margin, 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 the display: block; (except that the input label is special ). After using float layout and having a horizontal margin, in IE6, he has the bug of the horizontal margin after the block attribute float. However, because it is an attribute label in the row, 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: img labels are intra-row attribute labels, so as long as they do not exceed the container width, img labels will be placed in one line, but some browsers will have a gap between img labels. Remove this interval and use float as the proper path. (One of my students can solve negative margin, but negative margin itself is an easy way to cause browser compatibility problems, so I disable it)

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

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

Chances: 5%

Solution: if we want to set the minimum height of a tag of 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 other 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 with slight settings. 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.

1. /* CSS hack */

I seldom 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. However, hacker is very useful. Using hacker, I can divide browsers into three categories: IE6, IE7, and roaming; 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:

1. Height: 300px; * height: 200px; _ height: 100px;

When the IE6 browser reads the height: 300px, it will think 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 considered as 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. Because the setting of attributes with the same priority and conflicting needs will overwrite the previous one, the writing order is very important.