Browser compatibility issues and common solutions_html/css_WEB-ITnose

1. What is browser compatibility problem

Browser compatibility problem, also known as web page compatibility and website compatibility problem, refers to the display of web pages on various browsers The effect may be inconsistent and cause compatibility issues between browsers and web pages. In the design and production of the website, browser compatibility is ensured so that the website can display normally in different browsers. As for the development and design of browser software, better compatibility of browsers with standards can give users a better experience.

2. Causes of browser compatibility issues

Because different browsers use different kernels and support web language standards such as HTML; and the user client environment is different (such as different resolutions) The resulting display effect cannot achieve the desired effect. The most common problem is that the position of web page elements is chaotic, misplaced, and cannot be displayed.

3. Common browser compatibility issues and solutions

1. Different browser tags have different default margins and padding (this is the most common and easiest to solve) .

Problem status: Just write a few tags, without style control, the margin and padding of different browsers vary greatly.

Solution: Use: *{margin:0px; padding:0px} in css.

2. After the block attribute tag is floated and there are horizontal margins, the margin displayed in IE6 is larger than the set value.

Problem status: The following block attribute tag is pushed to the next line.

Solution: Add:display:inline; to the float label style to convert it into an inline attribute.

3. Set a smaller height tag (generally less than 10px). In IE6 and IE7, the height exceeds the height you set in the game.

Problem status: The height of this emoticon in IE6, 7 and Aoyou is not familiar with the control, exceeding the height set by yourself.

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

4. Inline attribute tags, use float layout after setting display:block, and there are horizontal margins, IE6 spacing bug.

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

Solution: add display:inline;display:table;

5. Images have spacing by default.

Problem status: When several img tags are put together, some browsers have default spacing, and adding the wildcard mentioned in question 1 does not work.

Solution: Use float for img layout.

6. The minimum height setting of the label is compatible with min-height.

Problem status: Because min-height itself is an incompatible CSS property, setting min-height cannot be well compatible with browsers.

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;} .

7. Compatible CSS settings for transparency.

The way to make compatible pages is: every time we write a small piece of code (a line or a block in the layout), we have to check whether it is compatible in different browsers. Of course, it won't be so troublesome when you are proficient to a certain level. . 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.

1. /* 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. 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*

◆The hacker I know in IE7 is asterisk*

For example, this is a CSS setting:

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

When the IE6 browser reads height:300px, it will think that the height is 300px; continue reading, it also knows *heihgt, so when IE6 reads *height:200px, it will overwrite the previous conflict. settings, 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.