偶然发现最新版本的Chrome浏览器无法识别margin:0 -.8em;这样的写法：即左右margin同时为负值。
正常效果是这样的：
html代码：（与话题无关的代码已删除）
<a href="javascript:;"> <i class="icon wb-bell"></i> <span class="badge up">5</span> </a>原本的CSS：
.badge.up { position: relative; top: -10px; margin: 0 -.8em; border-radius: 15px; }我们知道，margin:0 -.8em，相当于：
margin-left: -0.8em; margin-right: -0.8em; margin-top: 0; margin-bottom: 0;Chrome版本及其效果：
旧版本：
最新版本：
可以看出76版本的Chrome中，margin: 0 -.8em产生了意料之外的结果。
解决方法将margin: 0 -.8em改成margin-left: -.8em即可。
.badge.up { position: relative; top: -10px; margin-left: -.8em; border-radius: 15px; }
转载于:https://www.cnblogs.com/mankii/p/11470981.html
