Css 左＆；就在flex项目chrome vs firefox中

Chrome和Firefox似乎对flex box项中的填充进行了不同的解释。我以前把它包好了，但在这种情况下似乎不起作用

  <div class="flex">
    <div class="wrapper">
      <div class="item">i</div>
    </div>
    <div class="wrapper">
      <div class="item">i</div>
    </div>
    <div class="wrapper">
      <div class="item">i</div>
    </div>
  </div>


.flex {
  display: flex;
  justify-content: space-around;
}

.item {
  padding: 100% 50%;
  background-color: lime;
}

我
我
我
.flex{
显示器：flex；
证明内容：周围的空间；
}
.项目{
填充：100%50%；
背景色：石灰；
}

铬：

火狐：

---

为什么会发生这种情况？为了在chrome和firefox中的项目上有相同的填充，我应该怎么做？

尝试执行CSS重置。转到并获得其中一个重置。然后用其中一个代码创建一个css文件，并将该css文件链接到html文档中。现在，每次有人访问该网页（无论浏览器如何），它都会重置所有预先确定的边距和填充，您可以使用新的css文件设置自己的边距和填充