浮点数：对；导致文字缩小（特定于Chrome）

Question

当我float:right具体span内的文本缩小时，我遇到了chrome问题（Mozilla可以正常工作）。这仅在chrome中的响应式设计模式下发生，但在实时移动版本中也发生。

可能存在一个总体问题。在第一张照片中，图标和文本被挤压在一起，而在Firefox或常规Chrome中则不会发生这种情况。

这里是一张图片，没有向右浮动。

这是一张向右浮动的图片

这是删节的HTML

<div class="post-footer">
    <span class="tag"><i class="fas fa-tags"></i>music</span>
    <span id="date" class="tag"><i class="fas fa-calendar-plus"></i>June 7th, 2018</span>
</div>

这是CSS

.post-footer {
  padding: 15px;
}

.post-footer .tag {
  border-radius: 200px;
  background-color: #c0392b;
  color: white;
  padding: 5px 15px;
  font-weight: 500;
}

.post-footer .tag i {
  padding-right: 10px;
}

#date {
  background-color: #27ae60;
  float: right;
  padding: 2px 12px;
}

任何关于为什么chrome这样起作用的想法？是否有Wiki或常见浏览器错误的指南？

编辑：该网站似乎可以在带野生动物园和Chrome的iPhone上正常运行。在Chrome上无法使用S9。

The complete code can be found here