谷歌浏览器margin：0 -.8em兼容问题

偶然发现最新版本的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