Question

在windows 10 enterprise 1803上的opera版本53.0.2907.99和chrome版本67.0.3396.87的以下代码示例中，由于某种原因，左边的td与右边的td（35.6px）的高度（36px）不同。在进行研究时，我发现如果我们添加更多的td，那么那些具有img作为孩子的td＆＃39; s将具有错误的较小高度（35.6px而不是36px）

以下是重现问题的代码：

<html>
<head>
<style>
img {
    height: 34px;
    width: 34px;
    margin-right: 6px;
    border-radius: 100%;
    display: block;
}
td {
background-color: blue;
}
</style>
</head>
<body style="background:black;color: white;">
    <table style="background-color: red;width: 100%; border-collapse: collapse">
        <tbody>
            <tr role="row" style="background: yellow">
                <td>a</td>
                <td><img src="data:image/jpeg;base64,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"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

这是一个真正的问题，因为我们的情况是缺少0.4px显示错误的背景颜色。

注意：在Firefox中不会发生。注意：从img标签中删除高度，宽度会使两个tds具有相同的高度。

编辑：设置填充后：tds上的0仍然有0.4px差异：

EDIT2：应用以下关于填充和html边距的答案，身体没有帮助：

EDIT3：

Edit4：

Answer 1

这是因为Google Chrome用户代理默认情况下会向许多元素添加填充。

您可以通过以下方式覆盖用户代理规则：

td {
  padding: 0;
}

为了避免进一步的问题，您可以使用许多CSS reset stylesheets中的一个。

Answer 2

重置margin: 0和padding: 0，并确保html和body明确设置宽度和高度。 img是一个块，因此它的高度会影响<td>，因为<td>会想要符合其内容的高度。如果img为inline，这不是问题，因为inline元素的高度不会影响block和inline-block的周围环境。

演示

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
    }
    
    * {
      margin: 0;
      padding: 0
    }
    
    img {
      height: 34px;
      width: 34px;
      margin-right: 6px;
      border-radius: 100%;
      display: block;
    }
    
    td {
      background-color: blue;
    }
  </style>
</head>

<body style="background:black;color: white;">
  <table style="background-color: red;width: 100%; border-collapse: collapse;">
    <tbody>
      <tr role="row" style="background: yellow">
        <td>a</td>
        <td><img src="data:image/jpeg;base64,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"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

＆＃13;

在设置高度，宽度设置的子<img/>时，Opera和Chrome的高度错误

2 个答案:

演示