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

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>

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

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

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

Answer 1

嗯

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

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

https://jsfiddle.net/e08buvp5/