html - 为什么我的 margin 在 chrome 中看起来和在所有其他浏览器中都不一样

Question

我遇到了一个以前从未遇到过的问题。我构建了一个标题，左侧有一个菜单图标，右侧有三个图标。右侧三个图标中的两个有徽章。问题是徽章在 safari、firefox、edge 等上看起来很完美，但在 chrome 上它们就太左了。如果我现在将边距从 margin: 0 0 0 -8px 更改为 margin: 0 0 0 11px 在 chrome 上看起来不错，但在所有其他浏览器中是否很对。 margin 怎么会看起来不一样呢？以前从未见过。

.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;}