我发现了一个意外的问题。

我将图像添加到DOM中。该图像的类包含一个
margin-left: 5px;属性。但是在Google Chrome中渲染后,margin大于应有的值,但是在图像上显示:hover后,margin消失了。
您能向我解释为什么这样做吗?在其他浏览器上,它可以正常工作。



图片说明

将鼠标悬停在图像上之前:

html - Google Chrome渲染引擎-意外边距,将鼠标悬停在图片上后将其删除-LMLPHP

将鼠标悬停在图像上(第一个)后:
在这里,margin将被永久删除。悬停后不会延长。注意猪和蜘蛛头像之间的微小变化。
html - Google Chrome渲染引擎-意外边距,将鼠标悬停在图片上后将其删除-LMLPHP

实际上,这很烦人:

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


CSS:

.avatar{
    margin-right: 5px;
}


Website with problem on Google Chrome (Sometimes there is not players, so you won't see any avatars, sorry for that.

最佳答案

尝试这个:

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


它将修复您的错误。

10-07 19:56
查看更多