html - IE 中使用 float 的 CSS 不需要的填充

Question

设计了漫长的一天，今天我遇到了一个问题。网站 www.dcninc.com/newtest/security_testing.php 是我目前正在工作的新设计。

如果您在 Firefox 中查看它，您会注意到右边的 2 个框没有填充(我故意这样做是为了解决我的问题)但是如果您在 IE 中查看同一页面，它会在右侧添加填充.下面是我的 CSS 和 HTML。

• > http://pastebin.com/hRxZp9ub
• > http://pastebin.com/YwSYn7ti

Answer 1

您的元素相互嵌套，宽度为 250。

像这样，

<table width="250"><tr width="250"></tr><table width="250"></table></table>

由于填充已经用完了一些宽度，因此没有 250 像素的可用空间供您放置在表格内。我会尝试将内部元素的宽度降低 10-20 像素。

希望这对您有所帮助。这是我引用的标记，

<table border="0" cellpadding="0" cellspacing="0" width="250">
<tr>
<td width="250" height="9" style="background:url(Images/right_box_gray_top.png) no-repeat;"></td>
</tr>
<tr>
<td style="background:url(Images/right_box_gray_middle.png) repeat-y" width="250">
<div class="list-right-info">
<table border="0" cellpadding="0" cellspacing="0" width="250">
<tr>
<td width="40"><img src="Images/icons/phonepic.jpg" border="0" /></td>
<td><center>CALL US TODAY<br /> 800.xxx.xxxx</center></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="background:url(Images/right_box_gray_bottom.png) no-repeat" width="250" height="108"></td>
</tr>
</table>