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

14 special cases to achieve initialization IE6,IE7 compatibility example analysis, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Summary of IE6,IE7 compatibility

In fact, the incompatibility of browsers is often caused by inconsistencies in the definition of some standards in different browsers, so we can do some initialization and many problems are easily solved.

Here are 14 special cases for reference only:

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 breaking the container 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 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 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.

5.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 ff and IE is sometimes inconsistent and seems to be related to it.

6. The phenomenon of swallowing. 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.

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

Leave blank under 8.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.

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

The 10.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 11.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 12.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 13.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.

14.width100% is very convenient to use in IE. It searches widths up layer by layer, ignoring the influence of floating layer, searching under ff to the end of floating layer, so you can only add width:100% to all floating layers in the middle. Tired. 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.