表格单元格在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

我不能使用图像地图,因为"支付会费"图像是表单元素,而不是锚标记.我已经尝试明确设置td高度没有成功.有任何想法吗？

Answer 1

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

问题

现在你的代码看起来像这样:

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

您可能认为这应该与以下内容相同:

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

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

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

不幸的是,W3C规范并没有特别要求用户代理在开始标记之后立即忽略或渲染空格,或者在结束标记之前立即渲染空白区域,因此有些浏览器会渲染它们,有些浏览器会完全忽略它们,有些浏览器会忽略它们他们但不完全.

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

解

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

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

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