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

Question

i have here a problem that i never seen before. i build a header with an menu icon on the left side and three icons on the right side of it. Two of the three icons on the right side, have badges. The problem is that the badges are looking perfect on safari, firefox, edge etc. but on chrome are they to much left. if i change now the margin from margin: 0 0 0 -8px to margin: 0 0 0 11px is it looking good on chrome, but in all other browser is it to much right. How can it be that a margin looks different? Never seen it before.
.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);
}
}
thats the css of the badges and im using skeleton as framework. I also have here a 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

Try to use right than margin: then position your list to relative
Check this out https://jsfiddle.net/febg4cuo/3/
Edited:
you need to add position relative to your list
.notification-bar> li{position:relative;}

Answer 2

You can position the badges absolutely and just add position: relative; to the <li> elements. This together with fiddling with the top and right css attributes solves the problem.
This is the part of css I modified:
.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);
}
Here is a working fiddle: https://jsfiddle.net/mz2m2qc1/1/

Answer 3

The problem with your code is you use margin instead of right position remove margin and use right position and every thing will be fine. Check Demo