可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, it's basically where the four corners have a td and and img (its a rounded corner form) .. if I remove the whitespace from the document it fixes the issue.. What actually happens is that it messes up the tables.. it puts a thin white line between the upper tr that holds the 2 corners and the next tr

I need to remove the the whitespace between the img and the TD, is there a better work around, as I have lots and not only that if I reformat the document the problem returns..

Here is a simple example..

   <table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
            style="margin: 0px; padding: 0px">
            <tr>
                <td width="12" align="left" valign="top">
                    <img src="content/images/corner_left.gif" width="12" height="12" />
                </td>

as you can see there is white space between img and td... and I remove it so it looks like this:

<img src="content/images/corner_left.gif" width="12" height="12" /></td>

the problem is gone, (notice the td and image are right next to each other)

Any ideas, I tried setting all sorts of css, padding 0px, margins 0px etc ...

Any ideas really appreciated.

回答1:

The only way to "fix it" (and I use that term loosely) is to remove the whitespace.

More importantly, you should stop making websites like it's 2001. :)

回答2:

As it turns out, removing the whitespace is NOT the only way to fix it. Everyone else has probably figured this out by now, but I figured I'd add it here for completeness for the next poor soul that stumbles across this annoying problem.

Basically, you don't have to worry about the whitespace in your markup. Instead, add style="display:block;" to the img tag. Since images are inline elements, and you have whitespace in your markup, IE adds the extra whitespace to the bottom of the cell to account for the possibility of text with decenders (e.g. g, y, p, etc.). Setting the img tag to display as a block element takes care of this. No more ugly whitespace!

Credit goes to this guy: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, which is where I found the answer. Guess he got it from a google discussion group or other.

Hope that helps!

回答3:

I've fixed adding this before the end of table:

<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>

Hope this help.

回答4:

This drove me nuts for a while - moving from IE 8.0 to IE 9.0 on intranet sites - all images suddenly had a bit of white space beneath them.

Setting display:block on the images did it for me.

回答5:

I tried all solutions above:

a) tried the display:block

b) removed white spaces in td tags (ie I used tr and td tags without white space inbetween them. )

c) I tried using:

padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;

Solution a) worked. Solutions b) and c) did not work on IE.

But the BEST SOLUTION I found is this:

Add a hspace=0 attribute to the Image tag. For example:

<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />

This does the trick.

回答6:

IE finds that there is text content inside the TD (other than the image), so it gives it its text line-height. Try setting a height and overflow: hidden for the TDs.

回答7:

It's been this way for as far back as I can remember, all versions.

For myself, I've never found another way than putting the image and td on the same line, but I've never really looked - there may be a way that I've missed. Guess I just got in the habit of streamlining them.

回答8:

Other (and the best :) ) solution is:

set the td width/height to the image width/height with css
set image to the background for td

Like:

<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>

It works form me :)

(sorry for my english :"> )

回答9:

Another late response, but you could also use line-height: 0; to remove the whitespace. To ensure that text will still be readable you could wrap it in another element and use line-height: normal or another value of your choice.