How to solve the problem of superfluous blank in the IE6 of Image element img

Source: Internet
Author: User

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

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. Methods to organize the network from the hail.

1. Convert pictures to block-level objects

That is, set up 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

That is, 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:

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.

Article from: www.cn8f.com

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.