左边填充＆am​​p;在flex item chrome vs firefox中

Question

Chrome和Firefox似乎解释了弹性框项目中不同的填充。我之前通过包装物品来修复它，但它似乎在这种情况下起作用。

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

http://jsbin.com/papuvidulepa/1/edit

铬：

火狐：

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

Answer 1

尝试重置CSS。转到http://www.cssreset.com/并进行其中一项重置。然后使用其中一个代码创建一个css文件，并将该css文件链接到您的html文档中。现在，每当有人进入网页（无论浏览器是什么），它都会重置所有预定的边距和填充，您可以使用新的css文件设置自己的。