Highlights of redundant bug solutions for IMG image elements

Core tips:Different solutions should be used based on different causes. Here, we will summarize the common methods to solve the bug of excess space under the Image Layout for your reference.

When layout the page Div + CSS, you may encounter IE6 (sometimes in Firefox) the problem of unnecessary blank space under the IMG Image Element in the browser is definitely a common solution to this problem ".

1. convert an image into a block-level object

That is, set IMG to "display: block ;". In this example, add a set of CSSCode: "# Sub IMG {display: block ;}".

2. Set the vertical alignment of the image

That is, you can set the vertical-align attribute of the image to "Top, text-top, bottom, text-bottom. In this example, add a set of CSS Code: "# sub IMG {vertical-align: Top ;}".

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

That is, adding a row in # Sub: "font-size: 0;" can solve the problem. But this also raises a new problem, and the text in the parent object cannot be displayed. Even if the text is enclosed in some quilt objects, the text size of the sub-object can still be displayed. However, when CSS verification is performed, an error is displayed, indicating that the text is too small.

4. Change the attributes of the parent object

If the width and height of the parent object are fixed and the image size varies with the parent object, you can set "overflow: hidden. In this example, you can add the following code to # Sub: "width: 88px; Height: 31px; overflow: hidden ;".

5. Set floating attributes of images

In this example, add a line of CSS Code: "# sub IMG {float: Left ;}". This method is a good choice to achieve text-and-text mixing.

6. Cancel the space between the Image Tag and the last ending tag of its parent object.

This method should be emphasized that this method may be messy during actual development, because when writing code, in order to make the code more semantic and hierarchical, it is inevitable to provide code indent display through IDE, which is mandatory
Then, the labels and other labels are displayed in a line break, for example, the "Apply source format" command of DW. Therefore, this method can be used for us to understand the case of bugs. For specific solutions, please refer to the recruitment and removal methods.
.

I transferred from: http://www.chinaz.com/Webbiz/Exp/0219C4502009.html

Personal summary:

The root cause may be the 6th point mentioned above, that is, "there is a space between the IMG tag and the last end tag", display: inline-block and display: when there is a space between tags in inline, there may be some problems (for example, excessive blank space), and IMG itself can be seen as an inline-block element.