Solve the problem of CSS incompatibility in browsers

Everyone must hate the incompatibility of browsers. Often we just fix it, but forget the more important thing, which is to trace the root cause and avoid similar incompatibilities from happening again.

Now, let me summarize some html coding elements, hoping to give you some guidance:
1. The size of the text itself is incompatible. The same Song-style text with font-size: 14px occupies different space in different browsers. Under IE, it actually occupies 16px in height and 3px in the bottom margin. In FF, it actually occupies 17px in height, 1px in the top and 1px in the bottom. White 3px, it will be even different under opera. Solution: Set line-height for text. Make sure all text has a default line-height value. This is important, we cannot tolerate a 1px difference in height.

2. The container height is limited under ff, that is, after the container defines the height, the shape of the container border is determined and will not be expanded by the content. However, under ie, it will be expanded by the content, and the height limit is invalid. So don't easily define height for the container.

3. We also discussed the problem of content breaking the container, horizontally. If the float container does not have a defined width, the content under ff will stretch the container width as much as possible, while under ie, content wrapping will be given priority. Therefore, floating containers whose contents may burst need to define width.

Small experiment: If you are interested, you can take a look at this experiment. Test each of the following codes in different browsers.


a.

b.

c.

d.

The above code is different in different browsers. The experiment originated from the use of small height value p,

, small height values ​​should be used together with overflow:hidden. The experiment is just for fun. What I want to point out is that browsers have very different interpretations of container boundaries, and the impact of container content varies.

4. Clearing floats. It is not possible to clear floats under ff.

To correct everyone's misunderstanding, it is wrong to say that ff is bad when encountering incompatibility. In fact, it is more often the strange behavior of ie that makes us at a loss. The following is a list of various misdeeds of ie6.

5. The most hated thing is the double-margin bug. Define margin-left or margin-right for a floating container under IE6. The actual effect is twice the value. The solution is to define display:inline for the floating container.

6.mirrormargin bug, when there is a float element in the outer element, if the outer element defines margin-top:14px, margin-bottom:14px will be automatically generated. Similar problems will also occur in padding, which are all specialties under IE6. The situations in which this type of bug occurs are more complicated. It is far more than just this kind of occurrence condition, and it has not been systematically sorted out. Solution: Set border or float on the outer element.

Extension: The interpretation of margin-bottom and padding-bottom of the container under ff and ie are sometimes inconsistent, which seems to be related to this.

7. Due to space limitations, I will not expand on the phenomenon of swallowing. It's still IE6, there are two p's up and down. The upper p sets the background, but it is found that the lower p that does not have a background also has a background. This is the phenomenon of swallowing. Corresponding to the background swallowing phenomenon above, there is also the phenomenon of missing borders under scrolling. Solution: Use zoom:1. This zoom seems to be specially designed to solve ie6 bugs.

8. Comments can also cause bugs~~~ "An extra pig." This is the copy used by previous people to summarize this bug. Under this bug in IE6, everyone will see the word pig on the page. Appears twice, the amount of repeated content varies depending on the number of comments. Solution: Use the " picRotate start " method to write comments.

9.

Riga float

, this is a typical and difficult compatibility issue. I hope everyone will pay attention to it. Different attributes of li will have different interpretation effects. , the explanation under ff is slightly understandable, but the explanation under ie6 will make you confused. Due to the complexity of the problem, a separate article will be dedicated to discussing this issue. There are relevant results in the article "ul usage experience", but the process of solving the problem is not given.

10. The strange behavior of ul using "float:left;display:inline". It can be seen that this css is added to display:inline in response to the double margin bug under ie6. This is also an important part of my css system. It is explained in the article "Using Experience of ul". And this css will make you miserable when used on ul. That’s it for now, I can’t say much more here.

The above is the detailed content of Solve the problem of CSS incompatibility in browsers. For more information, please follow other related articles on the PHP Chinese website!