1

我浏览了其他一些问题，但找不到可以解决我的问题的东西。

我在这里创建了一个代码片段：http: //jsfiddle.net/manoj382/3SeB7/embedded/result/

我有一张有一行和六个单元格的表格。每个 td/cell 的宽度都已定义，并且与其中的图像宽度相匹配（每个图像的宽度也已定义）。一切正常，但是当我在浏览器中放大或缩小时，偶尔会出现白色间隙。

我尝试在代码中删除空白，我定义了宽度和高度，图像设置为显示：块，每个单元格/图像的总宽度与整个表格的总宽度匹配，这也是定义的。但是，客户在缩放时对差距很挑剔，而我没有想法。

*这是一个 HTML 时事通讯，这就是我使用旧学校表格布局方法的原因。

<table width="600" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td width="31">
                <img src="http://placekitten.com/g/31/64" style="width:31px; height:64px;">
            </td>

            <td width="65">
                <img src="http://placekitten.com/g/65/64" style="width:65px; height:64px;">
            </td>

            <td width="411">
                <img src="http://placekitten.com/g/411/64" style="width:411px; height:64px;">
            </td>

            <td width="64">
                <img src="http://placekitten.com/g/64/64" style="width:64px; height:64px;">
            </td>

            <td width="29">
                <img src="http://placekitten.com/g/29/64" style="width:29px; height:64px;">
            </td>

        </tr>
    </tbody>
</table>

相关的CSS：

<style type="text/css">
    img {display:block !important;}
</style>
4

5 回答 5

3

在放大/缩小时，浏览器必须将框的宽度四舍五入为整数。你不能假设事情总是会正确对齐。

一种解决方案可能是使用float: left框而不是表格单元格，以便始终保证框彼此齐平。

另一种解决方案可能是使用背景图像而不是<img>上面评论中提到的@user1760422 的标签。您可以使图像比单元格稍宽，或者只允许background-repeat: repeat-x在图像之间显示一块像素而不是白色条带。

于 2012-10-27T05:58:58.150 回答
2

我无法解释它为什么这样做（我可以在我的 Mac 上复制它）。但我确实有解决办法。

出于某种原因，宽度为 411 像素的表格单元格显示为 412 像素宽。图像也显示为 412px 宽，尽管图像本身只有 411px 宽。如果您运行 Chrome 开发工具并将鼠标悬停在表格单元格上，您可以看到这一点。由于某种我无法解释的原因，它将显示它的实际宽度为 412。

如果我删除顶部 600 的表格宽度，问题就会消失。

改变这个：

<table width="600" cellpadding="0" cellspacing="0" border="0">

到：

<table cellpadding="0" cellspacing="0" border="0">

见：http: //jsfiddle.net/3SeB7/1/embedded/result/

于 2012-10-27T05:41:01.387 回答
1

问题是您的切片图像有时是奇数。如果将图像切片宽度更改为偶数（当然还有 img 和 td 标签中的宽度），它应该消除某些缩放级别的间隙。

于 2014-04-16T18:02:05.940 回答
0

在表格中给出宽度，尝试在样式标签中给出宽度：

安装在

试试下面

<table style="width:700px" cellpadding="0" cellspacing="0" border="0">

于 2013-12-09T03:57:46.393 回答
-1

我只是有一个类似的问题。浏览器正在做的是增加单元格，以便它们组合起来填充表格的整个宽度，这导致图像 is和 td<td>之间的空白是 now 。您可以通过将所有图像的 设置为 来解决此问题。XXpxXX.2313pxmin-width100%

于 2016-09-22T17:32:04.027 回答