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

This article is about how to solve the compatibility of IE6, IE7, IE8 and Firefox. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Several schemes to solve the compatibility of IE6, IE7, IE8 and Firefox

Browsers are not compatible. Do you know the source?

It is necessary to know everything in order to know why. Friends of front-end developers will encounter browser compatibility problems when they want to finish. I hope this article will be useful to you today.

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 Firefox, it actually occupies a high 17px, while the top leaves a blank, and the bottom leaves a blank. It is even more different under 3px 1px. 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.Firefox, 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 Firefox 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 small heightvalue div, which should be used in conjunction 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 Firefox.

Correct a misunderstanding that it is wrong to say that Firefox 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-marginbug. 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.mirrormarginbug, 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 Firefox 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 IE6bug.

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 "picRotatestart" 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 Firefox 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 doublemarginbug 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. The 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 Firefox. 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:hoverimg {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 Firefox.

14. Non-linked hover status. Div:hover {} such a style IE6 is not recognized, only under IE7, Firefox effect.

15.block a link, its inner absolute layer, absolute layer placed under img,IE, mouse click img will not have a link effect, Firefox, 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 csshack.

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:1pxsolidred} ul.ex {list-style:none;} ul.exli {float:left;border:1pxsolidgreen;} 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: give the ul attribute zoom:1 (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 Firefox and op, but also the invalidation of some margin values under IE

Dd Firefox

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

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

These are the solutions to the compatibility of IE6, IE7, IE8 and Firefox. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.