An IMG bottom appears blank in ASP.

Recently in the project, using the Table,div,css layout, the top of the IMG (picture), the bottom is always blank

After finding a lot of information, the problem is finally solved.

Online friends said is in the page Div+css typesetting, encountered IE6 (of course, sometimes Firefox will encounter) in the browser of the picture element img Under the superfluous blank problem is absolutely common for the problem of the solution is also "play by ear", according to the different reasons to use different solutions, Here to solve the problem directly to solve the IMG image layout of the excess space below the common method of the general summary, for your reference.

1. Convert a picture to a block-level object

That is, the style of setting IMG is:

Style= "Display:block;"

Or add a set of CSS code in this example:

#img {display:block;}

after testing, this method can be solved .

2. Set the vertical alignment of the picture

That is, setting the Vertical-align property of the picture to "Top,text-top,bottom,text-bottom" can also be resolved.

Add a set of CSS code in this example:

#img {vertical-align:top;}

Or

Style= "Vertical-align:top;"

3. Set the Parent object's text size to 0px

That is, add a line to the CSS in #table:

font-size:0;

can solve the problem. However, this also raises a new issue in which the text in the parent object cannot be displayed. Even if the text part of the quilt object, set the sub-object text size can still be displayed, but in the CSS when the validation will prompt the text too small error.

4. Change the properties of the parent object

If the parent object is wide, high-fixed, and the picture size is determined by the parent object, you can set:

Overflow:hidden;

To solve. In this example, you can add the following code to the CSS in #table:

Width:88px;height:31px;overflow:hidden;

5. Set the floating properties of the picture

In this case, add a line of CSS code:

#img {float:left;}

This approach is a good choice if you want to achieve a picture-and-text mix.

6. Cancels the space between the picture label and the last end tag of its parent object.

This method to emphasize, in the actual development of the method may be a mess, because in the code to make the code more semantic and clear, it is unavoidable to provide code indentation through the IDE, which will inevitably let the label and other labels line display, such as DW's " format source " command.

So this method can provide us with an understanding of the occurrence of a bug, the specific solution will have to see you recruit.

I learn from, learning the network of Friends of the solution, I also have a lot of help, in this thank you friends.