Common Browser compatibility problems and solutions (interview questions) and compatibility interviews

Common Browser compatibility problems and solutions (interview questions) and compatibility interviews

1. browser compatibility problem 1: The default margin and padding labels of 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:

You can use Normalize to clear the default style. For details, refer to the article: Come, let's talk about Normalize.css.

You can also use the following code:

body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }

 

2. browser compatibility problem 2: When the block attribute label float is used, the margin is larger than the configured one in IE6.

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.

 

3. 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.

 

4. 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 display: block; (except for the input/img labels ). 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.

 

5. browser compatibility question 5: The picture is separated by default.

Problem: when several img labels are put together, Some browsers have the default padding, And the wildcard clearing padding 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 the spacing and use float as the main path. (Negative margin can also be used. Although it can be solved, negative margin itself is a usage that may easily cause browser compatibility problems, so try not to use it)

 

6. browser compatibility Question 6: The minimum label height setting is min-height incompatible.

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: In front-end development of the B/S system, we have this requirement in many cases. 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.

 

7. browser compatibility 7: compatibility with various special styles, such as transparency, rounded corners, and shadows. For special styles, the code of Each browser is very different. Therefore, you can only query the information and write different codes for different browsers.

 

8. Clear floating:

    .clearfix::after {        content: "";        display: table;        clear: both;    }        .clearfix {        *zoom: 1;    }

9. Box Model

Element {        box-sizing: border-box;        /*box-sizing: content-box;*/    }

 

/* 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:

div { 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.

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.

Practice is the best way to solve the problem. It is also the only way to solve the problem. You can make more in person to grow faster and better. In addition, learning from others' experiences is also a shortcut to progress.

Reference link: http://jingyan.baidu.com/article/d169e1864f9c53436611d8eb.html