为什么在Chrome中查找我的边距与所有其他浏览器不同

Question

我这里有一个我从未见过的问题。我构建了一个标题，左侧是菜单图标，右侧是三个图标。右侧三个图标中的两个有徽章。问题是徽章在safari，firefox，edge等上看起来很完美，但是在chrome上他们还有很多东西。如果我现在更改从margin: 0 0 0 -8px到margin: 0 0 0 11px的边距，它在Chrome上看起来不错，但在所有其他浏览器中它是非常正确的。保证金看起来有何不同？从未见过它。

.pulse-badge {
background: rgba(51,51,51, 0.87); ;
border-radius: 50%;
min-height: 1.3rem;
margin: 0 0 0 -8px;
position: absolute;
min-width: 1.3rem;
top: 0.8em;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51,51,51, .051);
transform: translate3d(0, 0, 0);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);}

@keyframes pulse {
    to {
    box-shadow: 0 0 0 12px transparent, 0 0 0 16px rgba(90, 153, 212, 0);
    }
}

这就是徽章的CSS和我使用骨架作为框架。我还有一个jsfiddle你可以看到它，如果你改变了边距。如果有兴趣与其他内容一起查看，如果它有帮助live

，这里有一个与直播项目的链接

Answer 1

尝试使用right而不是margin:，然后将您的列表定位到relative 看看https://jsfiddle.net/febg4cuo/3/

编辑： 您需要相对于列表添加位置

 .notification-bar> li{position:relative;}

Answer 2

您可以绝对定位徽章，只需将position: relative;添加到<li>元素即可。这与摆弄顶部和右侧css属性一起解决了这个问题。

这是我修改过的css的一部分：

.notification-bar> li {
  position: relative; // Add this so the badges keep inside the li element
  cursor: pointer;
  display: table-cell;
  padding: 19px 20px 15px 20px;
  margin-bottom: 0;
}

.notification-bar>li:hover {
  background-color: rgba(241, 241, 241, 0.7);
  transition: background-color 0.6s ease;
}

.pulse-badge {
  background: rgba(51, 51, 51, 0.87);
  ;
  border-radius: 50%;
  min-height: 1.3rem;
  margin: 0;
  position: absolute;
  min-width: 1.3rem;
  top: 1em; // Edit this a little to place it where you wanted
  right: 1.1em; // Add this so the badges will be aligned on the right side of the icon
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, .051);
  transform: translate3d(0, 0, 0);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
}

这是一个工作小提琴：https://jsfiddle.net/mz2m2qc1/1/

Answer 3

您的代码的问题是您使用保证金而不是正确的位置删除margin并使用正确的位置，每件事情都会没事。查看Demo