When DIV+CSS layout of the page, it is absolutely common to encounter the problem of extra blanks in the image element img in the browser when encountering IE6 (of course, sometimes it will happen under Firefox). The solution to this problem is also a matter of time. Different solutions should be used according to the different reasons. Here we will summarize the common methods of solving the bugs in the extra gaps under the image layout for your reference.
1. Convert the picture to a block-level object
That is, set img to: display:block;
In this example, add a set of CSS codes: #sub img {display:block;}
2. Set the vertical alignment of the picture
That is, setting the vertical-align attributes of the picture to top, text-top, bottom, and text-bottom can also be solved. For example, add a set of CSS codes in this example: #sub img {vertical-align:top;}
3. Set the text size of the parent object to 0px
That is, add a line in #sub: font-size:0;
Can solve the problem. But this also raises new problems, and even text in the parent object cannot be displayed. Even if the text part is enclosed, the text size of the sub-object can still be displayed, but it will prompt an error of too small text when the CSS is validated.
4. Change the properties of the parent object
If the width and height of the parent object are fixed and the image size depends on the parent object, then you can set: overflow:hidden;
Let's solve it. As in this example, you can add the following code to #sub: width:88px;height:31px;overflow:hidden;
5. Set the floating properties of the picture
That is, add a line of CSS code in this example: #sub img {float:left;}
If you want to achieve mixed picture and text arrangement, this method is a good choice.
This method should be emphasized that in actual development, this method may cause chaos, because in order to make the code more semantic and hierarchical, it is inevitable to provide code indentation display through the IDE, which will inevitably allow labels and other labels to be displayed in line, such as DW's application of source format commands. So this method can help us understand a situation where the bug occurs, and you have to deal with it in specific solutions.