Shulou(Shulou.com)06/02 Report--

How to understand IE6,IE7,FF and other browser incompatibility reasons and solutions, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Focus on learning the causes and solutions of browser incompatibility such as IE6,IE7,FF. Only by tracing back to the root causes can similar incompatibilities be avoided.

Reasons for incompatibility of browsers such as IE6,IE7,FF and their solutions

Everyone must hate the incompatibility of browsers, and often we just fix it and forget the more important thing, which is to trace the root causes and avoid the recurrence of similar incompatibilities. In the following, I would like to sum up a few elements of html coding, hoping to give you some advice:

1. The size of the text itself is incompatible. The Song text of the same font-size:14px takes up different space in different browsers. Under ie, it actually occupies a high 16px, while under the blank 3px 1px, it actually occupies a high 17px, while under the white space, it is even more different under 3pxopera. Solution: set line-height for the text. Make sure that all text has a default line-height value. This is important because we cannot tolerate differences in 1px at a high level.

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

3. The problem of content breaking the container is also discussed, horizontally. If the width of the float container is not defined, the content under ff will expand the container width as much as possible, and the content wrapping will be preferred under ie. Therefore, floating containers whose content may break need to define width.

Small experiment: if you are interested, you can take a look at this experiment. Test the following code in different browsers.

A. B. C. D.

The above code is different in different browsers. The experiment originated from the use of the small height value div, and the small height value should be used with overflow:hidden. The experiment is just fun. I want to show that the browser interprets the boundaries of the container very differently, and the effects of the contents of the container are different.

4. The removal of floats can not be done without clearing floats under ff.

Correct a misunderstanding that it is wrong to say that ff is rotten when it comes to incompatibility. In fact, it is more often the strange performance of ie that makes us at a loss as to what to do. The following is a list of ie6's misdeeds.

5. The most hated, double-margin bug. The actual effect of defining margin-left or margin-right to a floating container under ie6 is twice the value. Solution to define a display:inline for a floating container.

6.mirrormargin bug, when there is a float element in the outer element, if the outer element defines margin-top:14px, it will automatically generate margin-bottom:14px. Similar problems will occur in padding, which are all specialties under ie6. The situation of this kind of bug is more complex, far more than this one condition, and has not been systematically sorted out yet. Solution: set the border or float for the outer element.

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

7. Devour phenomenon, limited to space, I will not expand. Or ie6, up and down two div, the above div sets the background, only to find that the div that does not set the background below also has a background, this is the swallowing phenomenon. Corresponding to the background gobbling phenomenon above, there is also the phenomenon of missing the bottom frame of the scroll. Solution: use zoom:1. This zoom seems to be specially created to solve ie6 bug.

8. Comments can also produce bug~~~ "an extra pig." This is the previous summary of the copywriting used by the bug. Under the bug of ie6, you will see the pig word appear twice on the page, and the amount of repeated content varies according to the number of comments. Solution: use the "picRotate start" method to write comments.

9. Riga float, which is a typical, thorny compatibility problem, hopes to arouse everyone's attention. Different attributes of li will have different interpretation effects. The explanation under ff is slightly understandable, and the explanation under ie6 will make you confused. Because of the complexity of the problem, there will be another article devoted to this problem. There are relevant results in the article "experience in the use of ul", but the process of solving the problem is not given.

10. The strange behavior of a ul that uses "float:left;display:inline". It can be seen that this sentence css is aimed at double margin bug under ie6 and added display:inline, which is also an important part of my css system, which is described in the article "experience in using ul". And the use of this sentence css on ul will make you miserable. So far, we can't say more here.

Leave blank under 11.img. Let's see what's wrong with this code:

Open the border of div and you find that the bottom of the picture is not close to the bottom of the container, but is caused by the white space character behind the img. To eliminate it, you must write like this.

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

twelve。 Losing line-height.

Text, unfortunately, the line-height effect of single-line text disappears under ie6. The reason is that

This inline-block element is written with the inline element. Solution: float both img and text.

Extension: we all know that img align has text-top,middle,absmiddle and so on. You can try to adjust img and text to make them consistent under ie and ff. You will find that no matter how you adjust them, you will not be satisfied. Simply float both the img and the text and adjust them with margin.

13. The hover status of the link. A:hover img {width:300px} the width of the image contained in the link changes when we want to hover the mouse, but it doesn't work under ie6, but it works under ie7 and ff.

14. Non-linked hover status. Div:hover {} such a style ie6 is not recognized, only under ie7, ff effect.

15.block a link, its inner absolute layer, absolute layer placed under img,ie, mouse click img will not have a link effect, ff, op normal.

I can't figure it out. I'll think of it later. If you have mastered the secret of many of the above problems, 90% of the incompatibility issues do not need another css hack.

16. Float that cannot be completely purged. If you let the li under ul have the float attribute, how do you clear the floating li? 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.

.c {clear:both;overflow:hidden;+overflow:visible} .bd {border:1px solid red} ul.ex {list-style:none;} ul.ex li {float:left;border:1px solid green;} sfsdfsfdf

Please test under ie and just change margin-top:19px to margin-top:20px. What did you find? Elements: doctype must have, under ie6, ie7 margin-top:19px is still good, margin-top:20px has a problem, can not be explained. You can also test the clear layer in a different location.

◆ solution: zoom:1 the ul attribute (it is useless to add zoom:1 to li)

Extension: the clear layer should be used separately. Maybe you put the clear attribute directly into the following content layer in order to save code, so there is a problem, not only the loss of margin effect under ff and op, but also the invalidation of some margin values under ie

Dd ff

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

If a serious bug,float element under 18.ie6 does not define a width, and if an internal div defines height or zoom:1, the div will occupy the whole line, even if you give it a width. The float element should be given a width if it is used as a layout or complex container.

For the bug under 19.ie6, the div for absolute positioning contains the div for relative positioning. If the specific value of div height for relative positioning of the inner layer is given, the width of the relative layer of the inner layer will be 100%, and the absolute layer of the outer layer will be enlarged. The solution gives the inner relative layer float attribute.

Under the bug under 20.ie6, in some cases, the text in the float layer under the position: relative layer cannot be selected. This bug forced me to build a common style library.

21. Finally, there is a drawback of ff. Width:100% this thing is very convenient to use in ie, will search the width value layer by layer upward, ignore the influence of the floating layer, search under ff to the end of the floating layer, so you can only add width:100% to all floating layers in the middle, tired ah. Opera learned this lesson and followed ie.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.