Common Browser compatibility problems and solutions and compatibility Solutions

Common Browser compatibility problems and solutions and compatibility Solutions

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:

Add a line to CSS

1

* {Margin: 0; padding: 0 ;}

 

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 the spacing and use float as the main 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 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.

 

JS solves the issue of transparent failure of png in IE6

 

 

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.