Html Opera和Chrome错误<；td>；生孩子时的身高<；img>；设置高度、宽度_Html_Css_Google Chrome_Html Table_Opera

Html Opera和Chrome错误<；td>；生孩子时的身高<；img>；设置高度、宽度

html css google-chrome

Html Opera和Chrome错误<；td>；生孩子时的身高<；img>；设置高度、宽度,html,css,google-chrome,html-table,opera,Html,Css,Google Chrome,Html Table,Opera,在以下windows 10 enterprise 1803上opera版本53.0.2907.99和chrome版本67.0.3396.87的代码示例中，由于某种原因，左侧td的高度（36px）不同于右侧td（35.6px）。在研究时，我发现如果我们增加更多的td，那么那些在儿童时期有img的td的高度就会变小（35.6px而不是36px）以下是重现问题的代码： <html> <head> <style> img { height: 34px;

在以下windows 10 enterprise 1803上opera版本53.0.2907.99和chrome版本67.0.3396.87的代码示例中，由于某种原因，左侧td的高度（36px）不同于右侧td（35.6px）。在研究时，我发现如果我们增加更多的td，那么那些在儿童时期有img的td的高度就会变小（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>


img{
高度：34px；
宽度：34px；
右边距：6px；
边界半径：100%；
显示：块；
}
运输署{
背景颜色：蓝色；
}
A.

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

注意：在firefox中不会发生这种情况。注意：从img标签中删除高度、宽度会使两个tds具有相同的高度

编辑：在tds上设置padding:0后，仍然存在0.4px的差异：

编辑2：应用下面关于html的填充和边距的答案，body没有帮助：

编辑3：

编辑4：

之所以会出现这种情况，是因为Google Chrome用户代理在默认情况下为许多元素添加了填充

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

td {
  padding: 0;
}

为了避免进一步的问题，可以使用多种方法中的一种。

重置

边距：0

和

填充：0

，并确保

html

和

body

明确设置了宽度和高度。img是一个块，因此其高度将影响

，因为

将希望与其内容的高度一致。如果img是

inline

，这不是问题，因为

inline

元素的高度不会像

block

和

inline block

那样影响其周围环境

演示


html，
身体{
宽度：100%；
身高：100%；
}
* {
保证金：0；
填充：0
}
img{
高度：34px；
宽度：34px；
右边距：6px；
边界半径：100%；
显示：块；
}
运输署{
背景颜色：蓝色；
}
A.

在哪个操作系统上？windows 10 enterprise 1803I无法在使用chrome的windows 10上重现此问题

67.0.3396.87

（如果我将给定代码保存为

index.html

）。您是否尝试过在未启用任何扩展的情况下启动chrome。可能是某个扩展名搞乱了。禁用了所有扩展名，甚至在匿名选项卡中打开了html文件，但仍然存在0.4px的差异。错误也发生在opera 53.0.2907.99（-1）中，这是错误的。不会以任何方式影响所述问题。两个tds之间仍有0.4 px的差异。我们的生产网站上有这个问题，它有所有可能的重置样式表，我只举了一个最小的例子来消除所有其他噪音。它适用于我、谷歌Chrome 67和Windows 10 Home设置后，左侧td的高度为34.4，右侧td的高度为34.4。错误。请参阅问题中的我的编辑2。直接在浏览器中运行代码片段会显示0.4px的高度差。以下是我的答案在片段中呈现的屏幕截图：不，我看不到，请向我解释为了从我的答案中获得这样的结果，你到底做了什么？我无法重现这个问题，除非我故意添加

0.4px边距

以获得第一个示例的结果，并且我必须故意添加

0.4px边距

以编辑2。如果你找不到解决方案，这并不意味着我故意在这里浪费时间。我想你还没有看过不仅包括不存在34.4px维度这一不可否认的事实，而且还包括这确实是我的答案这一事实。注意，在上面的图片中有你粗鲁的评论和我粗鲁的回答。完全按照我的方式重新拍摄屏幕截图。使用“计算”选项卡。这是您发布的原始图像：。这清楚地表明你确实有问题。比较一下现在的截图，这不再是你仍然声称存在的问题。我不知道当证据在手边时你为什么坚持相反的观点。