为什么我的边距在 chrome 中看起来与在所有其他浏览器中不同

Question

我遇到了一个以前从未遇到过的问题。我构建了一个 header，左侧有一个菜单图标，右侧有三个图标。右侧三个图标中的两个有徽章。问题是这些徽章在 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 where ya can see it, if ya change the margin. and here is a link with the live project if ya whant to see it with the other content if it helps live

Answer 1

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

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

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

Answer 2

你的代码的问题是你使用边距而不是正确的位置删除 margin 并使用正确的位置，一切都会好起来的。检查 Demo

Answer 3

您可以绝对定位徽章，只需将 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);
}

这是一个有效的 fiddle：https://jsfiddle.net/mz2m2qc1/1/

为什么我的边距在 chrome 中看起来与在所有其他浏览器中不同

why looks my margin different in chrome as in all other browsers

html

css

margin