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

Question

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

在 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

我不能使用图像映射，因为“Pay Dues”图像是表单元素，而不是 anchor 标记。我试过明确设置 td 高度但没有成功。有什么想法吗？

Answer 1

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

问题

现在您的代码如下所示:

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

您可能认为这应该与:

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

但事实并非如此；它被 Firefox 解释为:

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

不幸的是，W3C specs不特别要求用户代理在开始标记之后或结束标记之前立即忽略或呈现空白，因此某些浏览器会呈现它们，有些会完全忽略它们，有些会略微忽略它们但不会完全忽略它们。

在您的情况下，是后者。空白并没有真正呈现(至少不是水平呈现)，但 img 标签现在被视为在文本 block 内呈现。您看到的额外垂直空间是由 img 相对于文本 block 基线的垂直对齐引起的。

解决方案

现在，我一直不太擅长vertical-align 问题，但是这个问题有一些解决方案:

1. 您可以简单地在 img 标签上设置 vertical-align: top。
2. 您可以摆脱代码格式并消除 img 两边的空格。
3. 您可以将 font-size 更改为非常小的值，例如 1px。
4. 您可以在容器(即 table)上使用适当的背景图像，而不是在切片中呈现元素。

就个人而言，出于风格和实际原因，我会同时执行 2 和 4。对于像 a 这样的内联元素，不使用空格填充内容会更安全。使用合适的背景意味着您无需担心像素完美对齐，并且您可以减小图像尺寸。尽管在这种情况下我也不会使用表格。