仅在移动浏览器上按钮之间有额外间距

Question

我很难调试这个问题。我需要我的按钮既能接触又能水平堆叠。在桌面浏览器上，我得到类似于以下内容的内容：

#aWrapper {
  display: flex;
}

.buttons {
  border: 1px solid black;
  display: block;
 }

<div id="aWrapper">
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
</div>

这就是我想要的！但是在 iOS 上的移动浏览器（Chrome、Safari、Opera Mini 和 Firefox）上，我使用完全相同的代码得到了这个结果（我故意添加了边距来说明）：

#aWrapper {
  display: flex;
}

.buttons {
  border: 1px solid black;
  display: block;
  
  margin-right: 4px; /*IGNORE THIS*/
 }

<div id="aWrapper">
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
</div>

为什么会这样？我从其他答案中看到 white-white space 可能是一个问题，但在这种情况下不是。

这里是 CodePen 显示的实际效果。在桌面浏览器中打开它，然后使用任何浏览器在 iOS 设备上打开它。移动浏览器中的按钮之间应该有额外的间距，而在桌面浏览器中它们应该是接触的。

注意：我标记为正确的答案工作正常，但 display: flex 也适用于包装器，我只是没有正确导入我的 css 规范化文件，导致这种不必要的头痛。

Answer 1

嗯

因为我没有任何 ios 设备可以测试，但这是我期望的

#aWrapper .buttons{
  display: inline-block;
  border: 1px solid black;
  margin: 0;
  float: left;
}
#aWrapper{
  clear: both;
}

Extra spacing between buttons ONLY on mobile browsers