僅在移動瀏覽器上按鈕之間的額外間距

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/