Summary of common minor problems when writing DIV CSS_html/css_WEB-ITnose

1. Problems with ul and li attributes

The default internal and external patches (margin, padding) of ul are not 0. If the left floating attribute (float:left;) is used in li, it will often expand the external div, causing the page to deform. Moreover, in ie6, the first li will have a small indentation value, which ultimately results in There is a problem with typesetting. To solve the problem that the div layer is not stretched, you should set the inner and outer patches of the layer to 0 (margin: 0; padding: 0;), and to solve the problem that the first li has an indent value, you should define the li as a block display ( display:inline;)

2. The problem of img attribute

The problems of different browsers involved here, ie6 has always been the most troublesome problem for web designers. When inserting an img into a page, sometimes the height of the image displayed in IE6 is always greater than the accurate value, which will cause an error of 2px below. The solution is to define a display attribute for the img: img{float:left;}

3. Problems with the overflow attribute

This attribute is most commonly used in text fields, registration agreements, etc. Because the text is relatively large but does not want to occupy a large page space, it can be defined here The width and height values ​​of the layer, and then add the overflow:auto; attribute.

4. Float attribute problem

Sometimes there will be two or more div layers floating in the horizontal direction. They all use the float:left; attribute, which will eventually cause the lower layer to float. Moving to this horizontal direction will cause the page display to be very confusing. If you don't pay attention, it will be difficult to find the problem during the debugging stage. Be careful when dealing with float attributes. There are two ways to solve the above problem. The first is to define the clear:both; attribute on the parent layer of these floating layers; the second is to add the width values ​​of these layers to the value It is equal to the width value of the parent element, so that the layers below will naturally not float up.

5. The height value is not uniform

When the height is 1px, it may not be 1px but more than 1px in ie6. How to solve this problem? There are two methods. The first is to directly set the font size in the div layer to 1px (font-size:1px;). The second method is to set the line height in the div layer (line- height:1px;), but here we need to remind you that this layer cannot be empty in ie6, you can just write a space character ( ).

6. CSS encoding issues

When writing pages, many people are used to creating an html page through dw software, but often ignore the setting of its default encoding format, which ultimately causes the page to display garbled characters. . @charset "utf-8" Pay attention to this line of code. UTF-8 and gb2312 are two commonly used encoding methods. Choose the encoding format that matches them to avoid garbled characters.

7. Regarding the selection of selectors (class and id)

When a div is to be used multiple times on the page, do not use id, use class, and also use When referencing js, it is best not to use id in the style, because the id should be reserved for js to use. When programmers use .net to write the backend, it is best not to use id. The id should be reserved for programmers, and we use it for the frontend. class is ready.

8. The problem of automatic expansion of div layer height

The structure of the div layer is very complicated. At least two or more div layers are used. After defining the minimum height and height as automatic, but in the end After exceeding the layer height, the height displayed in ff will not be automatically expanded. The method to solve the incompatibility of ff is very simple, just add: overflow:hiiden;.

9. Commonly used compatibility attribute writing issues

I won’t list specific examples here. I guess you won’t be able to read this long article, so I will list the commonly used compatibility attributes. It’s up to you to use it flexibly! It is recommended that when defining attributes, the writing order is FireFox first, followed by IE8, IE7, and finally IE6.

　①!important attribute is only effective for ff, such as: width:200px!important;width:100px; then the width in ff is displayed as 200px

　②Attributes with "_" are only effective for ie6 Take effect, such as: color: red; _color: blue; then the font color in IE6 is blue

　③The attributes with " " are only effective for IE7, written as above

　④ff does not recognize anything, However, if the above small symbols are added to the style, it will take priority for specific browsers. For example, the css is defined as: color:yellow; color:blue;_color:red; then the output effect is that ff displays yellow, ie7 displays blue, and ie6 displays is red