Html Google Chrome渲染引擎-意外边距，将鼠标悬停在图像上后将被删除

我发现了一个意想不到的问题

我将图像添加到DOM中。图像具有包含 左边距：5px；属性但是在Google Chrome中渲染后，边距比应该的大，但是在I:悬停在图像上之后，边距就消失了。 你能给我解释一下，为什么会这样吗？在其他浏览器上，它可以正常工作

图片说明 将鼠标悬停在图像上之前：

将鼠标悬停在第一个图像上后： 在这里，边界将永远删除。悬停关闭后不延伸。注意猪和蜘蛛化身之间的小变化。

事实上，这很烦人：

   <img src="<link>" class="avatar">
   <img src="<link>" class="avatar">
   <img src="<link>" class="avatar">
   <img src="<link>" class="avatar">

试试这个：

.mc-avatar {
    display: block;
    float: left;
}

---

它将修复您的错误。

您的代码在哪里？代码根本不重要。我在上面说的HTML标签和页边空白就是最好的，祝你好运。给你，在帖子里写代码。相同的od页面。这不可能是整个页面上唯一的CSS。这是可行的，但是为什么这个bug不会出现在其他浏览器上呢？谷歌Chrome用另一种方式呈现？IIt不应该增加额外的无形利润，我guess@Savander浏览器渲染之间的差异。谢谢：应该是固定的，anyway@Savander这篇文章将解释为什么以及如何修复@Savander如果它对您有效，请将我的答案标记为解决方案

.mc-avatar {
    display: block;
    float: left;
}