html - 「display: table」と「float:left」がマージンを考慮していない

Question

コンテンツが垂直方向に中央に配置された、一連のボタンが一列に並んでいます。

.button {
  width: 18%;
  margin: 0 1%;
  height: 160px;
  padding: 10px;
  display: table;
  float: left;
}

.button-inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

しかし、何らかの理由で、モバイル ブラウザー (iOS 8.3 の Safari 8 および Chrome 41) で表示すると、ボタンは余白を考慮しません。

に変更display: tableすると、余白は問題ありませんが、 ondisplay: inline-blockを使用して達成された垂直方向の中央揃えが失われます。display: table-cell.button-inner

( を.button-inner使用して垂直方向に中央position: absolute揃えにすることもできますが、適切に中央揃えにするために、メディア クエリ全体で微調整が必​​要です。)

このマージンの問題が発生している理由はありますか?