Div+css 14 causes of common problems

When you do it in a browser, it's not the same thing in other browsers.
Most of the time, we're just going to fix it, or we can make different definitions for each browser by using various browsers for inconsistent code support.
In fact, the browser is incompatible, we tend to be different browsers for some standard definition of inconsistency caused, so we can do some initialization, many problems are easy to solve.
Here are 14 special cases for reference only:
1. The size of the text itself is not compatible. The same is the font-size:14px text, in different browsers occupy the space is not the same, ie under the actual account of 16px, under the white 3px,ff under the actual high 17px, left white 1px, under the white 3px,opera under the same. Solution: Set the text to Line-height. Make sure that all text has a default line-height value. This is important and we cannot tolerate 1px differences in height.

2.ff under the height of the container, that is, the container defines the height, the shape of the container border is determined, will not be content to support large, and IE will be the content of the large, high-limit failure. So don't make it easy to define height for the container.

3. The problem of bursting the container horizontally. If the float container does not have a defined width, the contents of the FF are as open as possible to the container width, and the content wrapping is preferred under IE. Therefore, the content may burst the floating container needs to define the width.
Small experiment: We are interested to see this experiment. Test the following code separately under different browsers.
A.<div style= "border:1px solid red;height:10px" ></div> B. <div style= "border:1px solid red;width:10px" ></div>
C. <div style= "border:1px solid Red;float:left" ></div> D. <div style= "border:1px solid Red;overflow: Hidden "></div>
The above code in different browsers is not the same, the experiment originated from the use of small height value Div, <div style= "Height:10px;overflow:hidden" &GT;&LT;/DIV&GT;, small height Values to be used in conjunction with Overflow:hidden. The experiment is fun, to illustrate, the browser to the container boundary interpretation is very different, the contents of the container affect the results are different.

4. The most hated, Double-margin bug. IE6 the floating container is defined margin-left or margin-right the actual effect is twice times the value. Solution to define the display:inline for the floating container.

5.mirror margin bug, when the outer element has a float element, the outer element, such as defining margin-top:14px, will automatically generate MARGIN-BOTTOM:14PX. Padding will also appear similar problems, are IE6 under the special products, the situation of such bugs is more complex, far more than this one of the conditions, has not been systematically organized. Solution: The outer element is set to border or set float.
Extension: The Margin-bottom,padding-bottom interpretation of containers under FF and IE is sometimes inconsistent and seems to be relevant.

6. Devouring the phenomenon. Or IE6, up and down two Div, the above div set the background, but found that the following does not set the background of the DIV also has a background, this is the devouring phenomenon. Corresponding to the above background devouring phenomenon, there is the phenomenon of scrolling down the border missing. Solution: Use Zoom:1. This zoom seems to be specifically designed to solve IE6 bugs.

7. Annotations can also produce bug~~~ "more than one pig." "This is the previous summary of the use of this bug copy, IE6 this bug, we will see in the page pig word appeared two times, the amount of repeated content due to the number of comments change." Solution: Use "<!–[if!" Ie]> picrotate Start <! [endif]–> "method to write a comment.

8.img under the white, we look at this code is what the problem:
<div>

</div>
To open the div's border, you find that the bottom of the picture is not close to the bottom of the container, is an img behind the white space character, to eliminate the need to write
<div>
</div>
The last two labels are next to each other. This bug still exists under IE7. Solution: Set Display:block to IMG.

9. Loss of Line-height. <div style= "line-height:20px" > text </div> Unfortunately, the single-line text IE6 effect disappears in line-height ... , because This inline-block element and the inline element are written together. Solution: let img and text float together.
Extension: You know that img align have text-top,middle,absmiddle ah what, you can try to adjust the IMG and text so that they can be consistent under IE and FF, you will find how the tune will not let you satisfied. Simply let img and text are float up, with margin adjustment.

The 10.clear layer should be used alone. Maybe you want to save the code to put the clear attribute directly to a content layer below, so there is a problem, not only FF and OP lost the margin effect, ie some margin value will also be invalidated
<div style= "Background:red;float:left;" >dd</div>
<div style= "Clear:both;margin-top:18px;background:green" >ff</div>

11.ie Overflow:hidden is not valid 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 Overflow-x or overflow-y features, IE7, FF does not support.

12.ie6 a serious bug,float element without a defined width, if the inner div defines the height or zoom:1, the DIV will fill a whole line, even if you give the width. The float element should be given a width if it is used as a layout or a complex container.

13.ie6 under the absolute positioning of the div contains a relative positioning of the div, if the inner layer relative positioning of the div height height concrete value, the inner layer relative layer will have a width value of 100%, the outer layer will be large. The solution gives the inner layer a float property relative to the layer.

14.width:100% this thing in IE is very convenient, will search the width of the layer upward, ignoring the impact of the floating layer, FF search to the end of the floating layer, so, can only give the middle of all the floating layer plus width:100% just line, tired ah. Opera has learned a good lesson with IE.

Div+css 14 causes of common problems