Question

我浏览了其他一些问题，但找不到能解决问题的方法。

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

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

我尝试删除代码中的空格，我定义了宽度和高度，图像设置为display：block，每个单元格/图像的总宽度与整个表格的总宽度相匹配，这也是定义的。然而，当放大时，客户对于差距很挑剔，而且我的想法也没有。

*这是一个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>

Answer 1

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

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

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

Answer 2

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

出于某种原因，宽度为411像素的表格单元格显示为412px宽。即使图像本身仅为411px宽，图像也显示为412px宽。如果您运行Chrome Dev Tools并将鼠标悬停在表格单元格上，则可以看到此信息。由于某些我无法解释的原因，它会显示它的实际宽度为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/

Answer 3

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

Answer 4

而不是在表格中给出宽度，请尝试在样式标记中给出宽度：

而不是

尝试以下

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

Answer 5

我刚才有类似的问题。浏览器正在做的是增加<td>单元格，以便组合它们填充表格的整个宽度，这会导致图像之间的空白XXpx和td现在是{{ 1}}。您可以通过将所有图片的XX.2313px设置为min-width来解决此问题。

在浏览器中放大或缩小时图像和td之间的空白区域

5 个答案: