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

This article mainly introduces "what are the compatibility problems of DIV+CSS development browsers". In daily operation, I believe many people have doubts about the compatibility problems of DIV+CSS development browsers. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "what are the compatibility problems of DIV+CSS development browsers?" Next, please follow the editor to study!

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.

Xiao Shijie: 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 together 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-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.

5.mirror margin 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.

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

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 "picRotate start" 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.

The last two labels should be next to each other. This 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 do you lose the margin effect under ff and op, but some margin values under ie also fail.

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.

15, sometimes add the style div {overflow:hidden} and the three browsers will be the same

At this point, the study on "what are the compatibility issues of DIV+CSS development browsers" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.