なぜ私のマージンは他のすべてのブラウザと同じようにクロムで違いますか

Question

私はこれまでに一度も見たことのない問題があります。私は、左側にメニューアイコンとそれの右側に3つのアイコンを持つヘッダーを構築します。右側の3つのアイコンのうち2つにバッジがあります。問題は、バッジがサファリ、ファイヤーフォックス、エッジなどで完璧に見えていることですが、クロムには多く残っています。私が今変更した場合、からmargin: 0 0 0 11pxまでのマージンはクロムで良く見えますが、他のブラウザではそれほど正しいです。マージンが異なって見えるのはどうでしょうか？以前は見たことがありません。

.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とフレームワークとしてのスケルトンを使用しているim。私はまた、ここではjsfiddleがあります。それはrelative チェックにこれをあなたのリストを配置し、その後margin:よりrightを使用してみてくださいlive

Answer 1

を助けた場合屋が他のコンテンツとそれを見るためにwhant場合は、ここでライブプロジェクトとのリンクあり

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

は作業フィドルです：https://jsfiddle.net/mz2m2qc1/1/