Detailed explanation of compatibility issues in different browsers

The so-called browser compatibility problem refers to the situation where different browsers have different parsing of the same piece of code, resulting in inconsistent page display effects. . In most cases, our requirement is that no matter what browser the user uses to view our website or log in to our system, there should be a unified display effect. Therefore, browser compatibility issues are issues that front-end developers often encounter and must solve.

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

The first category:

They are front-end developers who develop according to the design drawings accurately, which can be said to be accurate to 1px. They can easily find the shortcomings of the design drawings, and in rare cases they will encounter browser compatibility issues, and these problems They often eliminate browser bugs, and the pages they produce are easy to maintain in the future, with few code reuse problems. It can be said to be relatively stable and reliable code.

The second category:

are front-end developers who basically develop according to the design drawings. Many details are very different, such as spacing, line height, picture position, etc., which are often different by a few px. The realization of a certain effect was achieved through repeated debugging. The specific reasons for this effect are still vague, and the overall layout is very fragile. The slightest change makes it a mess. I don’t know why the code is written this way. Such developers often struggle with compatibility issues. After modifying this browser, it messed up another browser. I changed it over and over but still had no clue. In fact, most of the compatibility problems they encountered should not be blamed on the browser, but on their technology itself.

This article is mainly aimed at the first category, rigorous developers, so here we mainly analyze compatibility issues from the perspective of browser parsing differences.

Method/Step

Browser compatibility issue 1: Different browsers have different default outer patches and inner patches for tags

Problem symptoms: Just write a few tags without style control, and their respective margins and padding will be quite different.

Encounter frequency: 100%

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

Note: This is the most common and easiest To solve a browser compatibility issue, almost all CSS files will use the wildcard * at the beginning to set the internal and external patches of each tag to 0.

Browser compatibility issue 2: After the block attribute tag floats, and there are horizontal margins, the margin displayed in IE6 is larger than the set value

Symptoms of the problem: Whatever Write several tags, and without style control, their respective margins and padding will be quite different.

Encounter frequency: 100%

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

Note: This is the most common and easiest To solve a browser compatibility issue, almost all CSS files will use the wildcard * at the beginning to set the internal and external patches of each tag to 0.

Browser compatibility issue three: Set a smaller height tag (generally less than 10px). In IE6, IE7, and travel, the height exceeds the height you set

Problem symptoms: The height of this label in IE6, 7 and Aoyouli is not controlled and exceeds the height set by yourself

Frequency of encounter: 60%

Solution: Give the user who exceeds the height Set the label to overflow:hidden; or set the line-height to be less than the height you set.

Note: This situation usually occurs in labels where we set a small rounded corner background. The reason for this problem is that browsers before IE8 will give the label a minimum default line height. Even if your label is empty, the height of the label will still reach the default line height.

Browser compatibility issue 4: Inline attribute tags, float layout is used after setting display:block, and there are horizontal margins, IE6 spacing bug

Problem symptoms: The spacing ratio in IE6 exceeds the set spacing

Chance of encounter: 20%

Solution: Add display: inline; display: after display: block; table;

Note: For inline attribute tags, in order to set the width and height, we need to set display:block; (except for the input tag, which is special). After using float layout and horizontal margin, under IE6, it has the bug of horizontal margin after block attribute float. However, because it is an inline attribute tag itself, 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 issue 5: Images have spacing by default

Problem symptoms: When several img tags are put together, some browsers There will be a default spacing, and adding the wildcard mentioned in question 1 will not work.

Encounter probability: 20%

Solution: Use the float attribute to layout the img

Note: Because the img tag is an inline attribute tag, as long as it does not exceed the width of the container, The img tags will all be arranged in one line, but some browsers will have a gap between the img tags. Removing this spacing and using float is the right way. (One of my students uses negative margin. Although it can be solved, negative margin itself is a usage that can easily cause browser compatibility problems, so I prohibit their use)

Browser compatibility issue 6: The minimum height setting of the label, min-height, is incompatible

Problem symptom: Because min-height itself is an incompatible CSS property, so set min- height is not well compatible with various browsers

Encounter probability: 5%

Solution: If we want to set the minimum height of a label to 200px, the settings that need to be made are: { min-height:200px; height:auto !important; height:200px; overflow:visible;}

Note: When opening the front end of the B/S system, there are many situations where we have this requirement. When the content is smaller than a value (such as 300px). The height of the container is 300px; when the content height is greater than this value, the height of the container is raised instead of scroll bars appearing. At this time we will face this compatibility issue.

Browser compatibility issue 7: Transparency compatible CSS settings

The way to make a compatible page is: every time we write a small piece of code (a line or block in the layout) we You have to check whether it is compatible in different browsers. Of course, if you are proficient to a certain level, it will not be so troublesome. Recommended for novices who often encounter compatibility issues. Many compatibility problems are caused by browsers' different parsing of default attributes of tags. These compatibility problems can be easily solved with a little settings. If we are familiar with the default attributes of tags, we can better understand why compatibility problems occur and how to solve these compatibility problems.

/* CSS hack*/

I rarely use hackers, maybe it’s a personal habit. I don’t like to write code that is incompatible with IE, and then use hacks to solve it. But hacker is still very easy to use. Using hackers, I can divide browsers into 3 categories: IE6; IE7 and Aoyou; others (IE8 chrome ff safari opera, etc.)

◆The hackers that IE6 recognizes are underscore_ and asterisk*

◆IE7 The hacker I know when traveling is asterisk*

For example, this is a CSS setting:

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

Browsed by IE6 When the browser reads height: 300px, it will think the height is 300px; continue reading, it also knows *heihgt, so when IE6 reads *height: 200px, it will overwrite the conflicting setting of the previous one and think the height is 200px . Continue reading, IE6 also knows _height, so it will overwrite the 200px height setting and set the height to 100px;

IE7 and Aoyou also read down from the 300px height setting. They stop when they read *height200px because they don't know _height. So they will parse the height to 200px, and the remaining browsers only know the first height:300px; so they will parse the height to 300px. Because the setting of properties with the same priority and conflict will overwrite the previous one, the order of writing is very important.

The above is the detailed content of Detailed explanation of compatibility issues in different browsers. For more information, please follow other related articles on the PHP Chinese website!