Extra blank Bug solution under IMG image

In the div layout of the page, encountered IE6 (of course, sometimes Firefox will also encounter) in the browser image elements of the picture element img Superfluous blank problem is absolutely common to the problem of the solution is also "play by ear," according to the different reasons to use different solutions, Here the solution directly to solve the image layout of the redundant space below the common methods of the bug induction, for your reference.

1. Convert pictures to block-level objects

That is, set img as "Display:block;" In this example, add a set of CSS code: "#sub img {display:block;}".

2. Set the vertical alignment of the picture

That is, setting the picture's Vertical-align property to "Top,text-top,bottom,text-bottom" can also be resolved. Add a set of CSS code in this example: "#sub img {vertical-align:top;}".

3. Set the text size of the parent object to 0px

Add a row to the #sub: "font-size:0;" can solve the problem. However, this raises a new problem, and the text in the parent object cannot be displayed. Even if the text part of the quilt, set child object text size can still be displayed, but in the CSS when the time will prompt text too small error.

4, change the properties of the parent object

If the parent object is wide and high fixed and the picture size depends on the parent object, you can set the Overflow:hidden. To solve. In this example, you can add the following code to the #sub: "Width:88px;height:31px;overflow:hidden;".

5, set the picture's floating properties

In this case, add a line of CSS code: "#sub img {float:left;}". This approach is a good choice if you want to implement a graphic mix.

6. Remove the space between the label of the picture and the last ending tag of its parent object.

This method should be emphasized, in practice, this approach can be a mess, because in writing code in order to make the code more semantic and hierarchical clarity, it is inevitable to provide the code through the IDE indentation display, which will make the label and other labels, such as the "Apply source format" command of the DW. So this method can provide us with a case of the emergence of a bug, the specific solution is still to see the recruit.