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

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/