Layout 8.4

Floating Stepfather Container height adaptive

When an element inside a container floats, it will not increase as the height of the inner element increases, resulting in the display of content elements beyond the container. To make it easier to see the effect, add a border and padding to the #layout in just the instance:

#layout {width:400px; border:2px solid #ccc; padding:2px;}

It is not supported by the content element, to solve this problem, you need to use the following style

Overflow:auto; Zoom:1;

Overflow:auto, which is to make highly adaptive, Zoom:1, is written for compatibility with IE6 (this style cannot be verified by the consortium).

This is called CSS hack, before the 3px bug to forget to say that the CSS hack is something, now add:

Because of different browsers, such as IE 6,ie 7,ie8,mozilla Firefox, and so on, the parsing of CSS is not the same, it will result in the resulting page effect is not the same, get the page effect we need. At this time we need to write different CSS for different browsers, so that it can be compatible with different browsers, can be in different browsers can also get the desired page effect. The process of writing different CSS code for different browsers is called CSS hack. The overflow:auto here; Zoom:1, is the so-called CSS hack, this form is to apply our common code to solve the incompatibility problem, but also to add some special symbols, it does not make sense, it is only for different browsers to recognize it to achieve

Double margin Bug for IE6

This is again IE6 a famous bug, also we often encounter. As in the above example, when the left margin is set after floating, the leftmost side will be displayed as double margins, such as set to 20, but in the IE6 display 40px, solve this problem just apply a style, you can remember

Display:inline;

Another bug:

#menu ul li {float:left;}

#menu ul Li a {display:block; padding:0px 8px; height:26px; line-height:26px; float:left;}

Here #menu ul Li A would have been without float:left, but IE6 under the Li did not set the width, #menu ul li a set display:block case, will show confusion, so need to add float:left on a to correct

CSS Sprites Technology

CSS sprites in the domestic many people called CSS Sprite or CSS sprite. It is to integrate some of the background image into a picture file, and then use the background image of the CSS to navigate to the location to display. This reduces the file size, reduces the number of requests to the server, and improves efficiency.

Before you speak CSS sprites, let's figure out the background image.

#menu ul Li a {background: #ccc URL (images/nav_bg2.gif) 0 0 no-repeat;}

CSS Background properties abbreviated as shown above, #ccc表示背景色; URL () is the background picture path, the next two numeric parameters are left and right, the first parameter is the number of PX from the left, the second parameter indicates how much distance, this and padding shorthand is not the same, must not be confused. In addition, the CSS value of 0 can be without units, the other values must be with the unit (line-height value is how many times, except Zoom,z-index); no-repeat indicates which direction the background picture repeats, and is not duplicated at this time.

Also need to explain that the location of the position of the image parameter is the upper left corner of the picture as the origin, understand these, CSS sprites technology is basically understood, is based on the background image positioning to achieve

Layout 8.4