html - マージン左（パーセンテージで設定）はChrome（Firefoxではない）の各要素で縮小します

Question

これがhttp://jsfiddle.net/6quT7/で、Chromeで表示するとすべての余白左が小さくなり、Firefoxで表示すると各要素の余白左が同じ寸法になることがわかります。

これがHTMLです：

<div class="group">
<div class="group_unit_first_child">
    <p>Hermelin</p>
</div>
<div class="group_unit color_green">
    <p>2</p>
</div>
<div class="group_unit color_blue">
    <p>2</p>
</div>
<div class="group_unit color_white">
    <p>8</p>
</div>
<div class="group_unit color_orange">
    <p>2</p>
</div>
</div>

そしてここにCSSがあります：

.group_unit_first_child {
height: 100%;
width: 40.1%;
float: left;
background-color: #4e4e4e;
border-radius: 8px;
display: table;
}

.group_unit {
height: 100%;
width: 12.64%;
float: left;
text-align: center;
background-color: #4e4e4e;
border-radius: 8px;
margin-left: 0.96%;
display: table;

}

この問題の修正はありますか？

ありがとう！

Answer 1

表示位置をテーブルからブロックに変更しましたが、うまくいきました。あなたは本当にそのdisplay:tableプロパティが必要ですか？

Answer 2

display: table;から削除すると機能する.group_unitはずです。

フィドル