问题

Question

我有两个表格单元格。第一个包含链接和图像（“CollegiateLink”）。第二个包含一个带有提交按钮图像的表单（“支付会费”）：

enter image description here

在Firefox和IE中，单元格具有不需要的填充，如上所示。在Chrome中他们显得很好。这是为什么？

这是表格行的来源：

<tr>
    <td>
        <a href="https://utsa.collegiatelink.net/organization/sigmakappaupsilonhonorsociety">
        <img src="http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/396010_343796938973248_154024167950527_1347540_1267421848_n.jpg" onMouseOver="this.src='http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/404415_343796945639914_154024167950527_1347541_548420198_n.jpg'" 
            alt="CollegiateLink" onMouseOut="this.src='http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/396010_343796938973248_154024167950527_1347540_1267421848_n.jpg'" />
        </a>
    </td>
    <td>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="UVBXKLNNGX8GL">
        <input type="image" src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/382615_343796955639913_154024167950527_1347542_331738916_n.jpg" onMouseOver="this.src='http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/396479_343796968973245_154024167950527_1347543_1793145374_n.jpg'" 
            onMouseOut="this.src='http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/382615_343796955639913_154024167950527_1347542_331738916_n.jpg'" border="0" name="submit" 
            alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" style="position: absolute; bottom: 0; right: 0;">
        </form>
    </td>
</tr>

问题的一个（非）工作示例可以在这里找到：http://www.facebook.com/sky.utsa

我无法使用图像地图，因为“付费”图像是表单元素，而不是锚标记。我已经尝试明确设置td高度没有成功。有什么想法吗？

Answer 1

问题是由HTML格式化引起的。 W3C规范在此问题上尚不清楚，但内联元素并不总是忽略您可能用于代码格式化的空格元素。他们可能会将白色空间折叠成单个字符（除非它是一个不间断的空间），但它仍然存在。

问题

现在您的代码如下所示：

<a href="...">
  <img src="..."/>
</a>

您可能认为这应该与：

相同

<a href="..."><img src="..."/></a>

但不是;它被Firefox解释为：

<a href="..."> <img src="..."/> </a>

不幸的是，W3C specs并没有特别要求用户代理在开始标记之后立即忽略或渲染空格，或者在结束标记之前立即显示空格，因此某些浏览器会渲染它们，有些会完全渲染它们忽略它们，有些人会忽略它们但不完全忽略它们。

在你的情况下，它是后者。白色空间并未真正呈现（至少不是水平），但img标记现在被视为在文本块内呈现。您看到的额外垂直空间是由img相对于文本块基线的垂直对齐引起的。

解决方案

现在，我对vertical-align问题一直不太满意，但这个问题有一些解决方案：

您只需在vertical-align: top代码上设置img。
您可以摆脱代码格式并消除img两侧的空格。
您可以将font-size更改为非常小的内容，例如1px。
您可以在容器上使用正确的背景图像（即table），而不是在切片中渲染元素。

就个人而言，出于风格和实际原因，我会同时做2和4.对于像a这样的内联元素，它只是更安全而不是用空格填充内容。使用适当的背景意味着您不必担心像素完美对齐，和可以减少图像尺寸。虽然在这种情况下我也不会使用表格。

Answer 2

您可以合并导致Firefox出现问题的两个<td>元素，并将按钮浮动并相互叠加。

而不是：

<tr>
   <td>
      <a href="#">
         <img src="image.jpg"/>
      </a>
   </td>

   <td>
      <form target="_blank" method="post" action="">
         <!-- form stuff here -->
      </form>
   </td>
</tr>

试试这个：

<tr>
   <td>
      <a href="#" style="float:left;">
         <img src="image.jpg"/>
      </a>

      <form target="_blank" method="post" action="" style="float:left;">
         <!-- form stuff here -->
      </form>
   </td>
</tr>

Answer 3

我在表格的底部<td>元素中遇到了这个问题。使用Firefox，图像下方还显示了2px。（IE还可以。）

无论如何，我登陆了这个有趣的页面： https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

图像位于文本基线上（显然），我将此标记添加到图像

style="display: block;"

表格单元格在Firefox和IE中显示不需要的填充

3 个答案:

问题

解决方案