Analysis of causes of css browser incompatibility and solutions Page 1/2_Experience exchange

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 the text line-height. 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 is limited. Invalid. So don't easily define height for the container.

3. Also discussed the problem of content breaking the container, horizontally. if float The container has no defined width. The content under ff will try to stretch the width of the container as much as possible, while under ie, priority will be given to content wrapping. 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 div,

, small height The value 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 lists the various misdeeds of ie6.

5. The most hated thing is the double-margin bug. Define margin-left or margin-right for floating containers under ie6 The actual effect is 2 times 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 with padding, which are specialties under IE6. This type of bug The situation is more complicated, far more than just this one occurrence condition, and it has not been systematically sorted out. Solution: Set border or float on the outer element.

Extension: ff and ie The explanation of margin-bottom and padding-bottom of the container is sometimes inconsistent, which seems to be related to it.

7. Due to space limitations, I will not expand on the phenomenon of swallowing. Still in ie6, there are two divs above and below. The upper div sets the background, but I find that there is no div below to set the background. There is also 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, this bug in ie6 Next, you will see the word pig appearing twice on the page, and the amount of repeated content changes depending on the number of comments. Solution: Use “ picRotate start ” method to write comments.

9. Add float to

, this is a typical and difficult compatibility issue. I hope everyone will pay attention to it and give li Different attributes 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 for the double margin under ie6 bug The addition of display:inline is also an important part of my CSS system, which is explained in the article "Experiences of using 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 space under 11.img is blank. Let’s see what’s wrong with this code:

Open the border of the div, and you find that the bottom of the image is not close to the bottom of the container. It is caused by the blank characters behind the img. To eliminate it, you must write like this

The last two tags should be next to each other. This bug still exists under ie7. Solution: Set display:block to img.

12. Lose line-height.

text

. Unfortunately, the single line text line-height effect disappears under IE6. . . , the reason is is written together with the inline element. Solution: Make both img and text float.

Extension: Everyone knows img The align includes text-top, middle, absmiddle and so on. You can try to adjust img. Make them consistent with text in IE and FF, and you will find that no matter how you adjust them, you will not be satisfied. Simply let the img and text float and adjust them with margin.

13. The hover status of the link. a:hover img{width:300px} We want the width of the image contained in the link to change when the mouse hovers. Unfortunately, it is invalid under ie6 and valid under ie7 and ff.

14. Non-linked hover state. The style div:hover{} is not recognized by IE6 and will only work under IE7 and FF.

15. The blocked a link has an absolute layer inside, and img is placed in the absolute layer. Under IE, clicking the img with the mouse will not have a link effect, but it will be normal under FF and op.

I can’t think of any, I’ll think of adding more later. If you master the secrets of many of the above problems, 90% of the incompatibility problems will not require a new CSS hack.

16. Float that cannot be completely cleared. If the li under ul has the float attribute, how to clear the floating li?

or

• class=”c”>

or

• class=”c”>

or

class=”c”>

Or a combination of the above? I can't give an answer to this question. Here is an example related to this

//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

• sfsdfsfdf


• sfsdfsfdf

sfsdfsfdf

Please test under ie, just change margin-top:19px changed to margin-top:20px What did you find? Elements: doctype must be present, margin-top:19px is fine under ie6 and ie7, margin-top:20px Something went wrong and I can't explain it. . . You can also change the clear layer to different positions for testing.

Solution: Give ul attribute zoom:1 (adding zoom:1 to li is useless)

Extension: The clear layer should be used alone. Maybe you put the clear attribute directly into a content layer below in order to save code. This is problematic. Not only will the margin effect be lost under ff and op, but some margin values ​​will also be invalid under ie.

dd

ff

17.ie under overflow:hidden it is invalid for the absolute layer position:absolute or the relative layer position:relative. Solution: Add position:relative or position:absolute to overflow:hidden. In addition, ie6 supports overflow-x or overflow-y features, but ie7 and ff do not support it.

A serious bug under 18.ie6. If the float element has no width defined, and if there is a div inside that defines height or zoom: 1, the div will fill the entire row, even if you give it a width. . If the float element is used as a layout or complex container, it must be given a width.

Bug under 19.ie6, an absolutely positioned div contains a relatively positioned div. If the height of the relatively positioned div in the inner layer is given a specific height value, the relative layer in the inner layer will have a width value of 100%. , the outer absolute layer will be stretched. The solution is to give the inner layer a float attribute to the relative layer.

Bug under 20.ie6, contains , the text in the float layer under the position: relative layer cannot be selected. This bug forced me to fix the common style library.

21. Finally there is a shortcoming of ff. Width:100% is very convenient to use in IE. It will search for the width value layer by layer upwards, ignoring the influence of the floating layer, and search under ff until the end of the floating layer. In this way, you can only add width: 100% to all floating layers in the middle. That’s it, I’m tired. Opera learned this well and followed ie.